Tự động hóa cấu hình Netlify dành riêng cho chi nhánh với Bash – Hướng dẫn từng bước

Khi bạn đang làm việc trên một dự án có nhiều môi trường – như chạy thử và sản xuất – để triển khai các API phụ trợ và giao diện người dùng, bạn sẽ muốn đảm bảo rằng mình có cấu hình và lệnh chính xác cho từng nhánh trong kho lưu trữ của mình.

Điều này có thể gây khó khăn trong những trường hợp có nhiều nhà phát triển đang tích cực làm việc trên một cơ sở mã, thực hiện các thay đổi đối với các nhánh khác nhau hoặc quản lý nhiều cấu hình dành riêng cho nhiều nhánh.

Giống như mọi yêu cầu kéo hoặc thay đổi được đẩy đến một nhánh, bạn sẽ cần xem lại từng dòng mã đã được thay đổi, thêm hoặc xóa trước khi quyết định nội dung nào sẽ được hợp nhất hay không. Các tệp cấu hình trong cơ sở mã không được miễn trừ điều này, khiến chúng dễ bị lỗi vì một thay đổi đơn giản có thể ảnh hưởng đến toàn bộ quá trình thiết lập Tích hợp liên tục của bạn.

Khi các thay đổi được thực hiện đối với nhánh dàn dựng hoặc nhánh sản xuất và bản dựng được kích hoạt, bạn sẽ muốn đảm bảo rằng các tài nguyên chính xác được gắn vào nhánh sẽ được duy trì. Trong một số trường hợp, bạn có thể cần xác định các quy tắc chuyển hướng khác nhau cho từng máy khách tương ứng, các lệnh xây dựng tùy chỉnh hoặc các cài đặt khác cho từng nhánh.

Trong bài viết này, tôi sẽ hướng dẫn cách quản lý các cấu hình dành riêng cho từng nhánh bao gồm tự động chuyển hướng cho nhiều nhánh bằng cách sử dụng tập lệnh bash đơn giản. Tôi cũng sẽ chỉ cho bạn cách hợp nhất các quy tắc theo ngữ cảnh cụ thể một cách an toàn cho các nhánh sản xuất và dàn dựng của bạn trên Netlify.

Nội dung chúng tôi sẽ đề cập:

• Cấu trúc và kịch bản dự án

• Chuyển hướng/Viết lại là gì?

• Cách Netlify xử lý chuyển hướng

  • Sử dụng cú pháp tệp _redirects

  • Sử dụng cú pháp tệp cấu hình netlify.toml

• Vấn đề:Quản lý nhiều tệp netlify.toml cho các nhánh khác nhau

• Cách viết tập lệnh để tự động tạo (các) tệp cấu hình của chúng tôi

  • Tệp Netlify.toml mẫu

  • Bước 1:Tạo thư mục script và thêm file script

  • Bước 2:Sửa đổi package.json để bao gồm lệnh script

• Cách triển khai ứng dụng khách của chúng tôi tới Netlify

  • Lần đầu tiên triển khai dự án của bạn lên Netlify

  • Triển khai tiếp theo/Cách thiết lập triển khai chi nhánh

    • Bước 1:Thiết lập các biến môi trường trong Netlify cho từng ngữ cảnh chi nhánh — sản xuất, dàn dựng, v.v.

    • Bước 2:Kích hoạt triển khai mới

• Kiểm tra việc triển khai của bạn

• Kết luận

Cấu trúc và kịch bản dự án

Hãy xem xét tình huống trong đó bạn có hai máy chủ riêng biệt được triển khai cho một dự án:một máy chủ để phân phát yêu cầu đến môi trường chạy thử (được triển khai cho Kết xuất) và một máy chủ khác cho môi trường sản xuất (được triển khai cho Google Cloud Run).

Bạn cũng có hai triển khai ứng dụng khách riêng biệt trên Netlify, mỗi triển khai có API_BASE_URL tương ứng, được phục vụ bởi các máy chủ tương ứng như minh họa bên dưới:

Hình bên dưới là sample-project kho lưu trữ, với api và client thư mục/thư mục bên trong nó. Đây là cái nhìn tổng quan về cấu trúc của từng nhánh được nêu ở trên. Mỗi thư mục chứa package.json riêng tệp, được coi là một thành phần độc lập và có thể được triển khai cho hai dịch vụ riêng biệt.

Trong quá trình triển khai giao diện người dùng cho từng khách hàng, tất cả yêu cầu của bạn được thực hiện tới các điểm cuối bắt đầu bằng /api/v1/ được định tuyến đến máy chủ. Các tuyến khác vẫn nằm trong giao diện người dùng để hướng bạn đến các trang trong ứng dụng khách. Vì vậy, bạn bắt buộc phải viết các quy tắc chính xác để hướng dẫn khách hàng của mình cách xử lý các yêu cầu này. Đây được gọi là quy tắc chuyển hướng hoặc viết lại.

Chuyển hướng/Viết lại là gì?

Chuyển hướng hoặc viết lại là các quy tắc bạn có thể tạo để một số URL nhất định tự động chuyển đến vị trí mới ở bất kỳ đâu trên internet (nguồn:WPengine). Chúng còn được gọi chung là chuyển tiếp URL và bạn có thể sử dụng chúng ở mọi nơi – trong toàn bộ trang web, các phần của trang web hoặc toàn bộ ứng dụng web.

Trong các ứng dụng web, chuyển hướng thường được sử dụng để xác định cách xử lý yêu cầu. Các nền tảng lưu trữ web như Netlify và Vercel cũng sử dụng chúng, mang lại cho nhà phát triển tùy chọn xác định cách ứng dụng web của họ xử lý yêu cầu.

Netlify xử lý chuyển hướng như thế nào

Netlify có hai cách có thể để chỉ định quy tắc chuyển hướng. Bạn có thể làm điều đó bằng cách sử dụng _redirects cú pháp tệp hoặc sử dụng netlify.toml cú pháp tập tin cấu hình. Họ đạt được cùng một mục tiêu, nhưng netlify.toml cú pháp cung cấp cho bạn nhiều tùy chọn và khả năng hơn.

Sử dụng _redirects cú pháp tập tin

Nếu bạn chọn sử dụng cú pháp chuyển hướng, bạn chỉ cần tạo _redirects tệp trong thư mục chung của ứng dụng khách của bạn và chỉ định các quy tắc chuyển hướng trong đó. Điều đó thật dễ dàng. Dưới đây là ví dụ về quy tắc chuyển hướng trong tệp:

Quy luật trên có thể hiểu là:

1. Gửi tất cả các yêu cầu của tôi phù hợp với /api/v1 tới URL API được chỉ định và trả về mã trạng thái thành công 200. Dấu hoa thị (*) sau /api/v1/ như đã thấy trong /api/v1/* hướng dẫn nó nối thêm bất kỳ phần mở rộng nào khác của URL gốc vào URL API đã nêu. Ví dụ:nếu bạn có /api/v1/users định tuyến trong giao diện người dùng của bạn, yêu cầu đó sẽ được chuyển hướng đến https://your-api-base-url.com/api/v1/users . :splat thấy trong URL API chỉ đơn giản là một phần giữ chỗ.

2. Phục vụ tất cả các tuyến mặc định khác thông qua thư mục index.html. Điều này là bắt buộc để đảm bảo rằng bạn không gặp phải các trang bị hỏng khi điều hướng đến các trang khác và cố gắng truy cập trang trước đó bằng nút “quay lại”.

Sử dụng netlify.toml cú pháp tập tin cấu hình

netlify.toml tệp cấu hình giúp bạn linh hoạt hơn rất nhiều khi chỉ định quy tắc chuyển hướng, bao gồm nhưng không giới hạn ở việc khớp tuyến yêu cầu ban đầu, đích đến được yêu cầu, phản hồi mã trạng thái ưu tiên, quy tắc tiêu đề, chữ ký, giới hạn quốc gia, vai trò, v.v.

Đây là mẫu netlify.toml tệp có nguồn gốc từ tài liệu của Netlify:

Ghi chú nhanh: việc sử dụng tệp chuyển hướng để chuyển hướng các yêu cầu nhất định tới API của chúng tôi là hoàn toàn ổn. Nhưng có thể coi đó là một rủi ro bảo mật khi thêm URL API của chúng tôi ở dạng văn bản thuần túy trong chuyển hướng tệp nếu API_BASE_URL được cho là ở chế độ riêng tư. Điều này là do bất kỳ tệp nào trong thư mục chung đều có vẻ giống như – công khai – và bất kỳ ai cũng có thể truy cập vào nó.

Nếu vị trí trực tiếp mà bạn muốn có trong ứng dụng của mình là URL công khai thì vui lòng sử dụng _redirects cú pháp tập tin. Nhưng nếu bạn muốn có (các) URL riêng tư, hãy sử dụng netlify.toml tệp cấu hình kết hợp với các biến môi trường nói chung là một ý tưởng tốt hơn.

Vấn đề:Quản lý nhiều netlify.toml Tệp cho các chi nhánh khác nhau

Khi bạn sử dụng netlify.toml để xác định các lệnh xây dựng và cài đặt dành riêng cho môi trường, đồng thời khi thực hiện các thay đổi được đẩy tới kho lưu trữ của mình và mở các yêu cầu kéo, bạn phải bỏ qua hoặc chỉnh sửa từng netlify.toml theo cách thủ công ở mỗi chi nhánh. Điều này cuối cùng sẽ trở nên rất căng thẳng và dễ mắc lỗi.

Ngoài ra, chúng tôi muốn tránh việc các URL API bị mã hóa cứng trong _redirects của chúng tôi hoặc netlify.toml tập tin trong cơ sở mã dự án của chúng tôi vì lý do bảo mật. Chúng tôi sẽ sử dụng các biến môi trường như được cung cấp trong giao diện người dùng Netlify cho bối cảnh sản xuất và dàn dựng.

Để tránh các vấn đề trên, chúng tôi sẽ sử dụng một tập lệnh nhỏ trong cơ sở mã của mình để tự động tạo netlify.toml chính xác các tập tin cho mỗi chi nhánh. Cách tiếp cận này loại bỏ xung đột và loại bỏ nhu cầu can thiệp thủ công khi chuyển đổi giữa các nhánh hoặc xử lý các yêu cầu kéo.

Cách viết tập lệnh để tự động tạo (các) tệp cấu hình của chúng tôi

Mẫu Netlify.toml tập tin

Dưới đây là ảnh chụp màn hình của mẫu netlify.toml tập tin chúng tôi đang cố gắng đạt được cho mỗi bản dựng. Bạn có thể thấy rằng tất cả các yêu cầu của chúng tôi đều khớp với api/v1/ trong cơ sở mã của chúng tôi sẽ được chuyển tới API của chúng tôi.

Bạn có thể yêu cầu cấu trúc các yêu cầu điểm cuối API của mình khác đi, ví dụ:/api/your-endpoint – chỉ cần đảm bảo điều chỉnh tập lệnh cho phù hợp. Trong dự án mẫu này, chúng tôi sử dụng api/v1/your-endpoint như cấu trúc của chúng tôi.

Bước 1:Tạo thư mục tập lệnh và thêm tệp tập lệnh

Trong client thư mục, tạo một scripts/ thư mục và một configure-netlify.sh tập tin kịch bản. Bạn được yêu cầu thực hiện việc này cho từng chi nhánh trong kho lưu trữ của mình. Nội dung vẫn giữ nguyên.

Mở configure-netlify.sh script và dán nội dung sau vào đó:

#!/bin/bash
# Ensure API_BASE_URL is set
if [ -z "$API_BASE_URL" ]; then
 echo "Error: API_BASE_URL environment variable is not set."
 exit 1 # Exit the script to stop the deployment
fi
echo "Using API endpoint: $API_BASE_URL"
# Define the desired Netlify configuration
NETLIFY_CONFIG="
[build]
 command = \"npm install && npm run build\"
 base = \"client\"
 publish = \"dist\"
[[redirects]]
 from = \"/api/v1/*\"
 to = \"$API_BASE_URL/:splat\"
 status = 200
 force = true
[[redirects]]
 from = \"/*\"
 to = \"/index.html\"
 status = 200
"
# Create or update the netlify.toml file
if [ ! -f "netlify.toml" ]; then
 echo "Creating netlify.toml file..."
else
 echo "Updating existing netlify.toml file..."
fi
echo "$NETLIFY_CONFIG" > netlify.toml
# Confirm successful configuration
echo "netlify.toml file has been configured successfully!"

Kịch bản thực hiện như sau:

1. Nó kiểm tra các biến môi trường để đảm bảo rằng API_BASE_URL được thiết lập. Nếu điều này không được đặt, nó sẽ thoát khỏi bản dựng và khiến bản dựng bị lỗi. Chúng tôi làm điều này để đảm bảo rằng bạn không tạo nhầm quá trình triển khai thành công nhưng có URL không hợp lệ trong quá trình sản xuất.

2. Sau đó nó tạo ra nội dung của netlify.toml tập tin như được hiển thị trong mẫu ở trên. Nếu điểm cuối API của bạn sử dụng cấu trúc khác với api/v1/your-endpoint , bạn có thể điều chỉnh tập lệnh cho phù hợp với cấu trúc mong muốn của mình.

3. Nó kiểm tra xem đã tồn tại netlify.toml chưa tập tin. Nếu nó không tồn tại, nó sẽ tạo một cái và ghi nội dung vào đó. Nếu nó tồn tại, nó sẽ cập nhật nội dung chính xác trong quá trình xây dựng bằng cách sử dụng API_BASE_URL được đặt trong các biến môi trường.

Bước 2:Sửa đổi package.json để bao gồm lệnh tập lệnh

Để tích hợp tập lệnh này với quá trình xây dựng của bạn, chúng tôi sẽ thêm lệnh tập lệnh vào package.json file để gọi tập lệnh này trước khi chạy bản dựng thực sự.

Thêm configure-netlify lệnh như sau:"configure-netlify": "bash scripts/ configure-netlify.sh" trong các tập lệnh trong package.json của bạn tập tin.

Cập nhật lệnh xây dựng của bạn để chạy tập lệnh trước khi chạy bản dựng thực tế:"build": "npm run configure-netlify && vite build" .

Đừng quên lưu những thay đổi này và đẩy chúng vào kho lưu trữ từ xa của bạn.

Cách triển khai ứng dụng khách của chúng tôi vào Netlify

Khi triển khai ứng dụng khách của mình lên Netlify, chúng tôi có ba tùy chọn:

1. nhập một dự án hiện có (nghĩa là một dự án tồn tại trên dịch vụ kho lưu trữ git như GitHub và GitLab),

2. nhập từ mẫu hoặc

3. triển khai thủ công một trang web tĩnh bằng giao diện thả (kéo và thả) của Netlify.

Để cấu hình trong kho lưu trữ của chúng tôi hoạt động như mong đợi trong quá trình xây dựng, bạn sẽ cần sử dụng tùy chọn yêu cầu nhập từ dự án hiện có, chẳng hạn như GitHub. Sử dụng giao diện kéo và thả sẽ không hoạt động. Nếu bạn phải sử dụng cái này thì hãy chọn _redirects tùy chọn cú pháp tệp để xác định chuyển hướng của bạn.

Triển khai lần đầu tiên dự án của bạn lên Netlify

Khi triển khai dự án của bạn lần đầu tiên, bạn được cung cấp tùy chọn ban đầu chỉ triển khai một nhánh. Bạn chỉ có thể thêm và chỉ định các tùy chọn khác, chẳng hạn như các nhánh khác, trong các lần triển khai tiếp theo.

Để triển khai dự án của bạn, hãy thực hiện các bước sau:

1. Đăng nhập vào Netlify> netlify.com

2. Nhấp vào "Thêm trang web mới"> "Nhập dự án hiện có"> "Triển khai bằng GitHub"

3. Nhấp vào "Định cấu hình Netlify trên GitHub"> Tìm kiếm kho lưu trữ của bạn> Chọn nó

4. Nhập tên trang web duy nhất cho dự án của bạn

5. Định cấu hình cài đặt triển khai. Tại đây bạn được yêu cầu chọn nhánh ưa thích để triển khai. Để triển khai lần đầu, chúng tôi sẽ triển khai main chi nhánh mà chúng tôi sử dụng làm chi nhánh sản xuất.

   • Chi nhánh:chính/chính

   • Lệnh xây dựng:npm run build

   • Thư mục xuất bản:dist (Chọn thư mục chứa tệp tĩnh của bạn. Trong dự án mẫu này, nó được xuất sang dist thư mục. Một số công cụ xuất ra build )

6. Nhập các biến môi trường cho dự án của bạn. Đừng quên nhập API_BASE_URL của bạn từ máy chủ của bạn. Đây là một yêu cầu thiết yếu theo tập lệnh bash.

7. Nhấp vào "Triển khai trang web"

Dự án của bạn phải triển khai chính xác và bạn sẽ có thể thấy netlify.toml cấu hình được tạo bởi tập lệnh bằng cách kiểm tra chi tiết triển khai ở cuối trang triển khai thành công.

Bạn có thể tải tệp này xuống máy cục bộ của mình để xem cấu hình được tạo. Nó phải khớp với mẫu netlify.toml tập tin ở trên. Bạn cũng có thể kiểm tra xem nó có hoạt động hay không bằng cách sử dụng liên kết trang web do bạn tạo.

Triển khai tiếp theo / Cách thiết lập triển khai chi nhánh

Bước 1:Thiết lập các biến môi trường trong Netlify cho từng ngữ cảnh chi nhánh  — sản xuất, dàn dựng, v.v.

Khi dự án của bạn đã được triển khai thành công, bạn có thể thiết lập triển khai cho nhánh thử nghiệm của mình. Để chỉnh sửa cấu hình, bạn cần:

1. Điều hướng đến danh sách các trang web của bạn

2. Chọn trang web đã triển khai thành công của bạn

3. Nhấp vào “cấu hình trang web” trên menu bên trái

4. Chọn “biến môi trường”> nhấp vào nút “Thêm biến”.

Bạn sẽ được cung cấp tùy chọn thêm các biến riêng lẻ hoặc nhập toàn bộ .env tập tin. Bạn có thể chọn một trong hai tùy chọn. Trong hình ảnh bên dưới, tôi đã chọn “Nhập từ .env tập tin”.

Thấy rằng trang web sản xuất của chúng tôi, được triển khai từ main nhánh (với các biến môi trường sản xuất), đã được triển khai, bạn sẽ cần:

1. Bỏ chọn nhánh sản xuất (để tránh thay thế nhánh chính được triển khai ban đầu. Hãy cẩn thận để không nhầm lẫn các biến môi trường của bạn cho các nhánh khác nhau)

2. Chọn “triển khai chi nhánh”

3. Sao chép và dán nội dung tệp .env của bạn vào phần đầu vào

4. Đừng quên thêm API_BASE_URL biến môi trường cho môi trường dàn dựng của bạn

Lưu ý rằng khi chọn triển khai nhánh, các biến môi trường được nhập ở đây sẽ ảnh hưởng đến tất cả các triển khai nhánh, ngoại trừ nhánh sản xuất. Bạn có thể tùy chỉnh thêm ngữ cảnh của mình bằng cách chọn một nhánh tùy chỉnh, nhưng đó là một cách tiếp cận hoàn toàn khác và có thể yêu cầu bạn tùy chỉnh thêm netlify.toml của mình tập tin cấu hình hoặc tập lệnh bash.

Nếu bạn quyết định nhập từng biến môi trường riêng lẻ, bạn sẽ được cung cấp tùy chọn tương tự như bên dưới. Đảm bảo rằng bạn chọn đúng ngữ cảnh cho từng nhánh.

KHÔNG SỬ DỤNG CÁC GIÁ TRỊ CÙNG CHO TẤT CẢ CÁC BỐI CẢNH. Như được thấy trong hình bên dưới, chọn “giá trị khác nhau cho từng bối cảnh triển khai ” sẽ cho phép bạn xác định các giá trị cho từng giá trị. Trong trường hợp này, chúng tôi xác định các giá trị cho việc triển khai nhánh. Biến sản xuất được sử dụng ban đầu của bạn đã tồn tại.

Khi tất cả các biến đã được nhập, bạn có thể kiểm tra chúng để xác nhận rằng chúng đã được nhập chính xác bằng cách chọn menu thả xuống ở bên phải bên cạnh mỗi biến và kiểm tra giá trị của chúng.

Bước 2:Kích hoạt triển khai mới

Khi tất cả các biến môi trường của bạn đã được nhập cho các bối cảnh khác nhau – sản xuất và dàn dựng trong trường hợp này – hãy điều hướng đến “triển khai” trên bảng điều khiển bên trái màn hình của bạn. Sau đó nhấn nút “Kích hoạt triển khai”, xóa bộ nhớ đệm và bắt đầu quá trình triển khai mới.

Kiểm tra việc triển khai của bạn

Bạn có thể xác nhận rằng tập lệnh của mình hoạt động như mong đợi bằng cách chọn bất kỳ hoạt động triển khai nào và chọn danh sách thả xuống tòa nhà trong “Nhật ký triển khai”. Bạn sẽ thấy lệnh chạy cũng như URL đầu ra và API cho hoạt động triển khai đó, như được xác định theo ngữ cảnh của bạn.

Kết luận

Bằng cách làm theo các bước trong hướng dẫn này và sử dụng tập lệnh cũng như các lệnh đã cập nhật trong từng nhánh trong kho lưu trữ của bạn, khi bạn đẩy các thay đổi thì Netlify sẽ tự động tạo hoặc cập nhật netlify.toml tập tin trong mỗi chi nhánh. Điều này đảm bảo rằng các cấu hình và biến môi trường chính xác cho từng môi trường được sử dụng tại thời điểm xây dựng.

Tập lệnh của bạn vẫn giữ nguyên trên tất cả các nhánh. Điều này cho phép bạn tập trung vào các thay đổi mã khác trong khi tập lệnh của bạn xử lý cấu hình chính xác cho bạn một cách an toàn và dễ dàng.

Đẩy các thay đổi tới bất kỳ nhánh nào để thấy điều này hoạt động.

Vui lòng kết nối với tôi trên Twitter (@francisihej) hoặc LinkedIn!

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu