Nuxt.js Elastic Beanstalk에 배포하기

결론 먼저

1. package.json 설정

"prestart": "nuxt build",

package.json파일의 scripts 부분에 위 내용을 추가합니다.

Nuxt.js를 프로덕션으로 실행하기 위해서는 nuxt start 전에 nuxt build를 먼저 실행해야합니다. prestart가 있다면 Elastic Beanstalk가 자동으로 npm start 전에 해당 내용을 실행해줍니다.

2. node-sass등 node-gyp를 사용하는 패키지가 있나요?

그렇다면 프로젝트 루트에 .npmrc파일을 만들고 아래 내용을 입력 후 저장합니다.

unsafe-perm=true

만약 해당 설정을 하지 않으면 permission 오류가 발생합니다.

가끔 t2.nano 등 인스턴스에서 메모리 초과로 빌드가 실패하는 오류가 있다고 합니다만, 저는 t2.micro에서 node-sass 설치하는 도중에 해당 오류를 발견하지는 못했습니다.

3. Elastic Beanstalk 환경 생성

노드 명령에 npm start를 입력합니다.

환경변수 두개를 만듭니다. NPM_USE_PRODUCTION=false로 설정하면 devDependencies도 설치하게됩니다.

끝!

이제 환경을 생성하면 Nuxt를 배포할 수 있습니다.

삽질한 내용

위 과정으로 배포에 성공하셨다면 축하드립니다. 하지만 여전히 오류가 발생한다면 혹시 놓친 부분이 있는지 제가 삽질한 내용을 훑어보세요.

삽질1. 프로젝트 그냥 배포

당연히 안될것을 알면서 일단 그냥 올려봅니다. 왜 당연히 안되냐면 nuxt.js 문서에 nuxt start 전에 nuxt build를 하라고 했거든요.

해결방법: package.json에 prestart: npm build를 추가한다.

그런데 앱 실행이 안되는건 당연하다 해도 nginx 오류는 올라와야 할 것인데, 서버가 연결을 끊습니다.

삽질2. 패키지 설치

로그를 받아보니 node-sass를 설치하는 도중에 permission 에러를 내고 죽어버립니다.

해결방법: .npmrc에 unsafe-perm=true를 추가합니다.

삽질3. heroku와 다른 환경변수

Heroku에 배포하기문서를 보면 환경변수 NPM_CONFIG_PRODUCTION를 false로 설정하라고 나옵니다. devDependencies를 설치하기 위한 과정인데, Elastic Beanstalk에서는 NPM_CONFIG_PRODUCTION이 아닌 NPM_USE_PRODUCTION을 등록해야합니다.

마치며

정리해보니 별 내용 없네요. 제 8시간이 이렇게 날아갔습니다. 흑흑

0
👍
0
❤️
0
😄
0
😝
0
😢
0
😡