docker上にnuxtjsを起動するまで

# はじめに
windows10環境にubuntu、docker、nuxt.jsを導入して起動するまでの記事です。
docker環境の構築は初めてなのでその手順の記録です。
Vagrantの導入と、nuxtjsのプロジェクト（テンプレート）生成は手順を省きます。
nuxt.jsはcliからテンプレートを生成しました。

最終的にnginx、nuxtの起動をdocker-composeを使ってcliを叩くのみで可能にします。

以下の手順で作成するファイルは全て、nuxtのcliで生成したプロジェクトテンプレートのrootに配置しています。

## 今回使ったもの
- windows 10
- Vagrant
- ubuntu 18.04
- docker
- docker-compose
- nuxt.js

ubuntu上でnuxtを起動するだけでは外部からアクセスできないためフロントにnginxを使います。
nginxはブラウザからポート80番へ通信がきたら、nuxtのデフォルトであるポート3000番へ経由する口になってもらいます。
ubuntuの中にnginxとnuxtのコンテナが出来上がり、外部からとのやり取りにnginxをはさみnuxtを公開する形になります。



## 構築手順

### Vagrant
ubuntu18.04を導入します。

```
$ vagrant init bento/ubuntu-18.04
```

必要に応じてVagrantFileを修正。  
今回はprivate ipの固定と、メモリを増やしました。  
コメントアウトされている箇所を有効にし、好みの値をいれます。

```
config.vm.network "private_network", ip: "192.168.33.10"

config.vm.provider "virtualbox" do |vb|
  # Display the VirtualBox GUI when booting the machine
  # vb.gui = true

  # Customize the amount of memory on the VM:
  vb.memory = "2048"  
end

```

仮想環境を起動

```
$ vagrant up
```

起動した仮想環境へssh

```
$ vagrant ssh
```

### Docker
先ほど用意した仮想環境へDockerを導入します。

aptパッケージのインデックス更新

```
$ sudo apt-get update
```

https経由でレポジトリを使えるようにするためにパッケージをインストール

```
$ sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
```

Dockerの公式GPSキーを追加

[GPGキーについて](https://tech.nikkeibp.co.jp/it/article/Keyword/20091204/341579/)は、GnuPGというソフトで生成された公開鍵をつかってパッケージ配布先の妥当性チェックに使うものだそうです。

```
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

フィンガープリントの確認

```
$ sudo apt-key fingerprint 0EBFCD88

pub   4096R/0EBFCD88 2017-02-22
      Key fingerprint = 9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid                  Docker Release (CE deb) <docker@docker.com>
sub   4096R/F273FCD8 2017-02-22
```

Dockerのリポジトリの設定

```
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```

aptパッケージのインデックス更新

```
$ sudo apt-get update
```

最新のdocker-ceを取得

```
$ sudo apt-get install docker-ce
```

これでインストールできました。

```
$ docker -v
Docker version 18.09.1, build 4c52b90
```

### docker-compose
導入方法は[こちら](http://docs.docker.jp/compose/install.html)が詳細に書かれているので参照してインストールしましょう。

### nginxの設定ファイルを作成
[nginx をリバースプロキシとして使う](https://ja.nuxtjs.org/faq/nginx-proxy/)を参考にします。

- ./nginx/nginx.conf

```
user nginx;
worker_processes auto;
pid        /var/run/nginx.pid;

http {
  upstream webapp_server {
    server webapp:3000;
  }

  map $sent_http_content_type $expires {
      "text/html"                 epoch;
      "text/html; charset=utf-8"  epoch;
      default                     off;
  }

  server {
    listen          *:80;
    server_name     _;
    charset utf-8;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://webapp_server;
    }
  }

}
```

ここの`webapp`の箇所は、のちに出るdocker-composeのservicesに定義した名称を記載
後ほど解説します。

```
upstream webapp_server {
  server webapp:3000;
}
```

### docker-composeのymlファイル作成
以下のファイルを作成します。

- ./docker-compose.yml

```
version: '3'

services:
  proxy:
    image: nginx:1.14.2
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    links:
      - webapp

  webapp:
    image: nuxt-project
    env_file:
      - ./.env
```
サービスとしてnuxtと、nginxの二つを定義
linksに設定した対象がdocker内のDNSサーバにて、指定したservicesの名前(今回はwebapp)で名前解決されるようになります。

- ./docker-compose.build.yml

```
version: '3'

services:
  webapp:
    build:
      context: .
```

- ./docker-compose.up.yml
- 
portsの設定でnginxが外部からのhttp通信で参照できるようにします。

```
version: '3'

services:
  proxy:
    ports:
      - "80:80"
    restart: always

  webapp:
    restart: always
```

### dockerイメージのビルドと読み込み、起動
以下のコマンドを作成したnuxtのプロジェクトフォルダをvagrantに配置し、
そのディレクトリまで移動してから実行してください。

- Dockerイメージの作成  
 
   ```
   // イメージをビルド
   $ docker-compose -f docker-compose.yml -f docker-compose.build.yml build
   ```

- 起動

   ```
   $ docker-compose -f docker-compose.yml -f docker-compose.up.yml up --b uild -d
   ```

## おわり
これで起動完了です。
お疲れ様でした。
初めての環境構築で、試行錯誤しながらなため誤りが存在するかもしれません。
ホストOSからubuntuのipを叩けばnuxtjsが開けるはずです。