個人の作業ログです

Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること

作成

CRN でチュートリアルに沿ってアプリを作成

Next の getStaticProps 周りをマスターしてきた。作ってきたプロジェクトを動かす。

この記事を参考に
Dockerfile をかく

Node Version は以前 React を動かした
13.12.12.0-alpine
を使う

記事のコードは

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 して image を作成する

今作った 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
- 現在コンテナの全てをコピー、上書き？
- build して production を作る
- npm run dev でサーバーをスタートする
Docker build して Dockerイメージを作成する
Docker イメージからコンテナを作成して port 番号を指定して起動する
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

![Screen Shot 2020-09-24 at 18.59.59.png]
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/355b0b87-f38a-e7c2-24a0-846081edfd10.png)

動いたあ！