Cloud Native Buildpack Nuxt.js 이동하는 Docker 컨테이너 만들기

계기.

읽었다Docker file에 대한 모범 사례 및 보안. 클라우드 내티브 빌드팩스(이하 CNB)의 존재를 알았다.
아주 간단한 Docker 컨테이너를 만들기 때문에 스스로 넥스트를 자주 만진다.제이스가 어떻게 했는지 생각해서 해봤어요.

사전 준비

필요Docker 및 Buildpack, Nuxt.js.환경이 없으면 아래 내용을 참고하여 설정하세요.

Docker

Buildpack

Node

Docker 이미지 만들기

Nuxtnpx create-nuxt-app.js 프로젝트 만들기

npx create-nuxt-app 명령을 사용하여 Nuxt.상호작용 형식으로 js 프로젝트를 만들 수 있습니다.

Nuxt.js 프로젝트에서 다음 명령을 실행합니다

pack build ${作成する Docker イメージ名} --builder gcr.io/buildpacks/builder:v1

builder에 다른 것도 준비되어 있습니다.이번에는 맨 위에 추천한 gcr.io/buildpacks/builder:v1를 사용하겠습니다.

Google:                gcr.io/buildpacks/builder:v1      Ubuntu 18 base image with buildpacks for .NET, Go, Java, Node.js, and Python
Heroku:                heroku/buildpacks:18              heroku-18 base image with buildpacks for Ruby, Java, Node.js, Python, Golang, & PHP
Paketo Buildpacks:     paketobuildpacks/builder:base     Ubuntu bionic base image with buildpacks for Java, .NET Core, NodeJS, Go, Ruby, NGINX and Procfile
Paketo Buildpacks:     paketobuildpacks/builder:full     Ubuntu bionic base image with buildpacks for Java, .NET Core, NodeJS, Go, PHP, Ruby, Apache HTTPD, NGINX and Procfile
Paketo Buildpacks:     paketobuildpacks/builder:tiny     Tiny base image (bionic build image, distroless-like run image) with buildpacks for Java Native Image and Go

Docker 컨테이너 만들기

다음은 Docker 컨테이너를 만듭니다.
위에서 설명한 Docker 이미지 실행npm start.동작만 확인하면 문제없지만 개발하면 열중복이 효과가 없다.따라서 다음과 같이 수정package.json의scripts.
호스트 측면NUXT_HOST=0.0.0.0에서 액세스할 수 있도록 지정localhost되었습니다.package.json 수정 후 오류commiit의 위험이 있으니 다른 방법이 있으면 알려주세요.🙇‍♀️)

- "start": "nuxt-ts start" 
+ "start": "NUXT_HOST=0.0.0.0 nuxt-ts"

이후 docker run로 용기를 만들면,Nuxt.Docker 컨테이너 내에서 js를 개발할 수 있습니다.

docker run -v ${ディレクトリパス}:/workspace --name nuxt ${作成した Docker イメージ名}