Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi có một ứng dụng React / Node mà tôi đang cố gắng lưu trữ trên AWS khuếch đại. lần đầu tiên thử, ứng dụng của tôi đã được triển khai nhưng tôi thấy một số trang không tải do thiếu các biến môi trường. tôi đã thêm chúng vào bảng điều khiển AWS trước khi triển khai và nó không hoạt động. sau đó tôi đã thực hiện một số tìm kiếm và tôi thấy rằng tôi cần sửa đổi tệp "amplify.yml" thành:

build:
  commands:
    - npm run build:$BUILD_ENV

nhưng không chỉ nó không hoạt động, ứng dụng cũng không hoạt động nữa. bất kỳ ý tưởng?

4 hữu ích 0 bình luận 4.4k xem chia sẻ
5

@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.

5 hữu ích 1 bình luận chia sẻ
4

Để 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.

4 hữu ích 0 bình luận chia sẻ
3

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:

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

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àm cách nào để thêm các biến môi trường vào AWS khuếch đại?

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.

3 hữu ích 0 bình luận chia sẻ
0

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.

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ node.js reactjs environment-variables aws amplify , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading