Làm cách nào để thêm các biến môi trường vào AWS khuếch đại?

@A Zarqam Này anh bạn, tôi gặp phải vấn đề này và đã dành một khoảng thời gian kha khá cho nó. Điều làm việc cho tôi là:

Trên mã React của tôi, hãy sử dụng process.env.VARIABLE_NAME

Trên webpack.config.js của tôi, sử dụng trình cắm sau:

webpack mới.EnosystemPlugin (['VARIABLE_NAME_1', 'VARIABLE_NAME_2'])

Trên các biến môi trường Khuếch đại đặt VARIABLE_NAME_1, v.v. và sau đó là các giá trị, giống như trong tài liệu nói.

Lần cuối cùng về cài đặt bản dựng:

build:
      commands:
        - npm run build
        - VARIABLE_NAME_1=$VARIABLE_NAME_1 

(cái có $ là tham chiếu đến cái bạn đặt vào bộ khuếch đại. Ngoài ra, tôi nghĩ bạn không được có khoảng trắng giữa ký hiệu =)

Sau đó, kích hoạt một bản dựng và vượt qua các ngón tay của bạn.

Để câu trả lời của @ leandro hoạt động, tôi phải đặt các tên biến môi trường AWS trong dấu ngoặc nhọn:

build:
  commands:
    - npm run build
    - VARIABLE_NAME_1=${VARIABLE_NAME_1}

Có lẽ tốt hơn như một bình luận nhưng tôi không có đủ điểm để đăng một.

Vì câu hỏi này đề cập cụ thể Reactnên đây là các bước bạn cần để sử dụng các biến môi trường trong ứng dụng dựa trên React của mình AWS Amplify.

Trong JS phía máy khách của bạn:

const BUILD_ENV = process.env.REACT_APP_BUILD_ENV || "any-default-local-build_env"; 

Điều quan trọng cần lưu ý ở đây là bản sửa lỗi trước của tôi REACT_APP_được bao gồm trong Create-React-Apptài liệu: tại đây

Bây giờ, trong bảng điều khiển Amplify của bạn , trong Cài đặt ứng dụng> Biến môi trường:

Cuối cùng, bạn cũng cần thêm tham chiếu này trong Cài đặt ứng dụng> Cài đặt bản dựng:

Lưu ý: "BUILD_ENV" có thể là bất kỳ chuỗi nào bạn muốn. Trong các biến môi trường, bạn có thể cung cấp các ghi đè DEV / PROD cần thiết.

KHÔNG lưu trữ KHÓA BÍ MẬT bằng phương pháp này, AWS cung cấp trình quản lý bí mật cho việc này. Phương pháp này dành cho các khóa có thể xuất bản, như kết nối với Firebase hoặc Stripe và khóa có thể được công khai.

Tài liệu Khuếch đại về Biến Môi trường có một phần về " Truy cập các Biến Môi trường ".

Theo tài liệu đó, trong Amplify.yml của bạn (trong bảng điều khiển hoặc bằng cách tải nó xuống thư mục gốc của dự án của bạn), bạn có thể sử dụng lệnh để đẩy Biến môi trường Amplify vào .env của mình. Nếu bạn đã tạo Biến môi trường trong Amplify có tên "REACT_APP_TEST_VARIABLE", bạn sẽ làm ...

   build:
      commands:
        - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
        - npm run build

Khi ở trong .env của bạn, bạn có thể truy cập chúng thông qua process.env ...

console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE)

Nếu bạn đang sử dụng Tạo ứng dụng React, bạn đã có dotenv hoặc xem Thêm tệp .env vào Dự án React để biết thêm thông tin.

Lời nhắc bắt buộc phải thêm .env của bạn vào .gitignore của bạn và không lưu trữ bất kỳ thứ gì nhạy cảm trong .env.