はじめに

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キーについては、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

導入方法はこちらが詳細に書かれているので参照してインストールしましょう。

nginxの設定ファイルを作成

nginx をリバースプロキシとして使うを参考にします。

./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が開けるはずです。

docker上にnuxtjsを起動するまで