Nuxt.jsで作ったものをそこそこ簡単な方法で公開する

おはようございます！
最近、会社で隣の席の人のお菓子を勝手に食べていたら、パクパク怪獣と呼ばれ始めた人です(・ω・)
こちらは[Vue.js #2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/vue2)の10日目の記事です。

# はじめに

[Nuxt.js](https://ja.nuxtjs.org/)を使って何かを作り終えたら、
最後は公開ですよね(｀・ω・´)

s3? EC2? VPSサーバー？などなど公開する方法はいろいろでてきます。
で...サクっと簡単に公開したい時があると思います。

今回は、そこそこ簡単な方法で公開できるやつを書きます！

# Nuxt.jsで何か作ってみる(｀・ω・´)

本題の前に簡単にNuxt.jsでサンプルプロジェクトみたいなものを作ってみます。

ちなみに...[Nuxt.js](https://ja.nuxtjs.org/)は、こういうものです。

> Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
> クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う UI レンダリング に焦点を当てています。

※ https://ja.nuxtjs.org/guide より

## 1. プロジェクト作成

[vue-cli](https://github.com/vuejs/vue-cli)を使います！
Nuxt.jsのテンプレートがあるので、サクッとできます。

```
vue init nuxt-community/starter-template プロジェクト名 
```

## 2. npm install

```
cd プロジェクト名 
npm install
```

## 3. 動かす(｀・ω・´)

```
npm run dev
```

<img width="401" alt="スクリーンショット 2017-12-09 16.06.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/53996/58a6be6c-9c18-0fef-1366-10d4abe168d8.png">

これで出来ました！！
詳しくは、[公式のドキュメント](https://ja.nuxtjs.org/guide)があるので、そちらを見てください！
Nuxt.jsはドキュメントが豊富なので、いつも助かってます！

# 公開するよ(｀・ω・´)

**ここからが本題です！**


## Netlify

[Netlify](https://www.netlify.com/)は、簡単に言うとホスティングサービスです。
詳しい説明は[公式ページ](https://www.netlify.com/)を見てください。

### 1. プロジェクト作成

GitHubなどにプロジェクトをpushします。
`New site from Git`を押して、ここでリポジトリを選びます。

<img width="550" alt="スクリーンショット 2017-12-09 16.10.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/53996/4ce969d8-a144-5441-158b-fffb0c908173.png">

### 2. デプロイ

Build commandに`npm run generate`
Publish directoryに`dist`をいれて、`Deploy site`を押します。
これで、ビルドが走り、デプロイされます。

<img width="500" alt="スクリーンショット 2017-12-09 16.13.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/53996/7f92da84-0d2e-1807-23ee-8eb1fb6a035a.png">

### 3. デプロイ完了

２，３分で、公開されます(｀・ω・´)

<img width="400" alt="スクリーンショット 2017-12-09 16.15.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/53996/d864ff57-1fb2-7b6d-c0bb-5307db82ae7d.png">

今後は、masterが更新される度に自動でビルド、デプロイしてくれます！
あ、注意が必要なのは、静的なページになりますので、**SSRができません。**

## AWS Lambda

`AWS Lambda`を使う方法を書こうと思いましたが、
12日の猫のアイコンの人がこの内容を書いたようなので、そちら↓↓をご覧ください。
[Nuxt.js on AWS Lambda](https://mya-ake.com/posts/nuxtjs-on-aws-lambda/)

## Dockerを使う(｀・ω・´)

Dockerだけでは公開できませんが、`AWS ECS`やDockerが動くサーバーなどで利用することが可能です。
※参考にAWS Fargateを使うという内容を書こうと思いましたが...時間がたりませんでした(´・ω・`)　ここは後日、書きます。。。

### 1. express

expressをいれます。

```
npm install express --save
```

### 2. expressでNuxt.jsを動かす

```server/index.js
const { Nuxt, Builder } = require('nuxt');
const express = require('express');
const app = express();

const host = '0.0.0.0';
const port = 3000;

app.set('port', port);

const isProd = process.env.NODE_ENV === 'production';

const config = require('../nuxt.config.js');
config.dev = !isProd;

const nuxt = new Nuxt(config);
const promise = isProd ? Promise.resolve() : new Builder(nuxt).build();

promise
  .then(() => {
    app.use(nuxt.render);
    app.listen(port, host);
    console.log('Server listening on ' + host + ':' + port);
  })
  .catch(error => {
    console.error(error);
});
```

`package.json`の`scripts`にexpressを起動するコマンド追加します。
**expressを立ち上げる前に必ず`npm run build`をしてください。**

```package.json
  "scripts": {
    "express": "node server/index.js"  
}
```

うまくできていれば...`npm run express`すると`localhost:3000`で動いているのが確認できます。

### 3. Dockerの作成

Dockerfileをこんな感じに作成します。

```Dockerfile
FROM node:7.9.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app

RUN npm install && npm cache clean
RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "express"]
```

`.dockerignore`は、こんな感じで。

```.dockerignore
node_modules/
package-lock.json
npm-debug.log
.nuxt/
yarn.lock
```

### 4. Docker build

```
docker image build -t hoge/hoge-nuxt:latest .
```

### 5. Docker run

```
docker container run -d -p 3000:3000 --name hoge hoge/hoge-nuxt:latest
```

うまくいくと`localhost:3000`で動いているのが確認できます。
これでDocker環境ができましたので、Dockerが動く所だとどこでも動きます(｀・ω・´)