Docker run で Next.js を動かす

# 個人の作業ログです

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


## 作成

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

![Screen Shot 2020-07-16 at 16.32.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/527ed670-e5ce-b7ce-dec7-e9cea2754cf5.png)

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

https://medium.com/@khwsc1/a-simple-react-next-js-app-development-on-docker-6f0bd3f78c2c

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

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

記事のコードは

```json:package.json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
```

### Dockerfile を書く

```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 を変えて書く。

```Dockerfile
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
```

* さっきビルドしたイメージからコンテナを作成した。
* これで動いている？

![Screen Shot 2020-09-24 at 18.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/2c238196-f2d1-f04e-26c3-25de0156ead9.png)

うーん、Docker で動いている実感が湧かない...

とりあえずターミナルのどのペインでも npm run dev 走ってないし、これは Docker を使って動いているんだろう


## まとめ

今回の手順としては

1. ローカルで CRN で作成、開発
2. Dockerfile を作成
    * Node Version
    * Docker コンテナでの作業ディレクトリ指定
    * package*.json の Docker コンテナへのコピー
    * コピーした Docker コンテナ内の package*.json を使って npm 依存関係　install
    * 現在コンテナの全てをコピー、上書き？
    * build して production を作る
    * npm run dev でサーバーをスタートする
    
3. Docker build して Dockerイメージ を作成する
4. Docker イメージからコンテナを作成して port 番号を指定して起動する
5. 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 配列でパースされます。つまり、文字を囲むのはシングル・クォート(‘) ではなくダブル・クォート(”)を使う必要があります。

http://docs.docker.jp/v1.9/engine/reference/builder.html

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)

動いたあ！