개인 작업 로그입니다.

Next.js를 시작하는 Dockerfile을 만들고 Next.js 컨테이너를 시작할 수 있습니다

만들기

CRN에서 자습서를 따라 앱 만들기



Next의 getStaticProps 주변을 마스터했습니다. 만들어 온 프로젝트를 움직인다.

이 기사를 참고로
Dockerfile 걸기

Node Version은 이전에 React를 실행했습니다.
13.12.12.0-알핀
사용

기사 코드는

package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

Dockerfile 쓰기

FROM node:10

# Setting working directory. All the path will be relative to WORKDIR
WORKDIR /usr/src/app

# Installing dependencies
COPY package*.json ./
RUN npm install

# Copying source files
COPY . .

# Building app
RUN npm run build

# Running the app
CMD [ "npm", "start" ]

입니다

Node의 Version을 바꾸어 쓴다.

FROM node:13.12.12.0-alpine

WORKDIR /usr/src/app

COPY package*json ./

RUN npm install

COPY . .

RUN npm run build

CMD [ 'npm', 'run', 'dev' ]

이번은 PATH 라든지는 필요없는 것인가?

Docker build로 이미지 만들기

지금 만든 Dockerfile에서 빌드

docker build -t kaede0902/docker-nextjs .
Sending build context to Docker daemon  99.16MB

Step 1/7 : FROM node:13.12.12.0-alpine
manifest for node:13.12.12.0-alpine not found:

그거? alpine 없음, node @ 12로 좋은가

Sending build context to Docker daemon  165.9MB
Step 1/7 : FROM node:12
 ---> 1fa6026dd8bb
Step 2/7 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 1951ed5d38b0
Step 3/7 : COPY package*json ./
 ---> 69929aec19da
Step 4/7 : RUN npm install
 ---> Running in 03aa10e0801f

조금 무거워졌지만 순조롭게 움직이고 있습니다

info  - Finalizing page optimization...                                                                                       [14/1853]

Page                                                           Size     First Load JS                                                  
┌ ● /                                                          632 B          69.6 kB                                                  
├   /_app                                                      0 B            58.5 kB                                                  
├ ○ /404                                                       309 B          58.8 kB                                                  
├ λ /api/hello                                                 0 B            58.5 kB                                                  
└ ● /posts/[id]                                                445 B          69.4 kB                                                  
    ├ /posts/pre-rendering                                                                                                             
    └ /posts/ssg-ssr                                                                                                                   
+ First Load JS shared by all                                  58.5 kB                                                                 
  ├ chunks/hogehogehogehoge.b1b405.js  10.3 kB                                                                 
  ├ chunks/framework.cb05d5.js                                 39.9 kB                                                                 
  ├ chunks/main.afa405.js                                      7.28 kB                                                                 
  ├ chunks/pages/_app.5a16a1.js                                294 B                                                                   
  ├ chunks/webpack.e06743.js                                   751 B
  └ css/hogehogehogehogehoge.css                               259 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)


Step 7/7 : CMD [ 'npm', 'run', 'dev' ]
 ---> Running in ahogeahoge
Removing intermediate container ahogeahoge
 ---> hogehoge1818
Successfully built hogehoge1818
Successfully tagged kaede0902/docker-nextjs:latest

무사히 빌드할 수 있었다!

Container를 이미지로 run 한다

docker run -d -p 3333:3000 <your_username>/docker-nextjs:latest

docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest
youridyouridyourid

조금 전에 빌드 한 이미지에서 컨테이너를 만들었습니다.

이것으로 움직이고 있습니까?

흠, Docker로 움직이고 있는 실감이 솟지 않아...

우선 터미널의 모든 창에서 npm run dev를 실행하지 않았고, 이것은 Docker를 사용하여 움직입니다.

요약

이번 절차로서는

로컬에서 CRN으로 작성, 개발

Dockerfile 만들기

Node Version

Docker 컨테이너의 작업 디렉토리 지정

package*.json 의 Docker 컨테이너에의 카피

복사 된 Docker 컨테이너의 package * .json을 사용하여 npm 종속성 install

현재 컨테이너의 모든 것을 복사, 덮어쓰기?

빌드하여 production 만들기

npm run dev로 서버 시작

Docker build 하여 Docker 이미지를 작성한다

Docker 이미지에서 컨테이너를 만들고 포트 번호를 지정하여 시작합니다.

localhost의 지정 번호를 브라우저로 확인

된다.

그렇게 생각하기 위해 Docker events에서 지금 움직이고있는 컨테이너를 마무리합니다.
움직이지 않니? ? ? ?

CONTAINER ID        NAME                CPU %               MEM USAGE / LIMIT   MEM %               NET I/O             BLOCK I/O           PIDS

docker ps -a로 프로세스 보기! ! !

 docker ps -a                                                                                               
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS                       PORTS   
                   NAMES                                                                                                               
4baeb6e08587        kaede0902/docker-nextjs:latest   "docker-entrypoint.s…"   23 minutes ago      Exited (2) 23 minutes ago            
                   gifted_zhukovsky                                                                                                    
c7f641e51856        kaede0902/node-web-app           "docker-entrypoint.s…"   2 months ago        Exited (137) 2 months ago  

VScode 통합 터미널이 움직였다

docker run -d -p 80:3000 kaede0902/docker-nextjs:latest
8c7abf96d0223173844524fb492078efd78f44a7fb867ebcb2f57ec00a4b09f4
docker: Error response from daemon: Ports are not available: listen tcp 0.0.0.0:80: bind: address already in use.

80 버림

docker log 보기

docker logs -f a79d015ebc5417e8e2104326e8014c9212c174720bf81a458e5c6b8002e32be1
/bin/sh: 1: [: npm,: unexpected operator

FROM node:12

WORKDIR /usr/src/app

COPY package*json ./

RUN npm install

COPY . .

RUN npm run build

CMD [ 'npm', 'start' ]

Dockerfile 수정

docker build -t kaede0902/docker-nextjs .

Successfully tagged kaede0902/docker-nextjs:latest

다시 이미지 빌드

docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest

여전히 3333에서 움직이지 않습니다.

CMD [ 'npm', 'start' ]
만약 싱글 쿠웨이트이기 때문에

주석
exec 형식은 JSON 배열로 구문 분석됩니다. 즉, 문자를 둘러싸는 것은 싱글 쿼트(‘)가 아니고 더블 쿼트(’)를 사용해야 합니다.


JS와 다르다! ! ! 함정이다! ! !

Dockerfile을 다시 작성하고 다시

Successfully built d07c2f0df820
Successfully tagged kaede0902/docker-nextjs:latest

docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest
99529632c37190826d390abd38af4e49bee4875d8404e3cef996e3678f857c3c



움직였다!