おはようございます！
最近、会社で隣の席の人のお菓子を勝手に食べていたら、パクパク怪獣と呼ばれ始めた人です(・ω・)
こちらはVue.js #2 Advent Calendar 2017の10日目の記事です。
はじめに
Nuxt.jsを使って何かを作り終えたら、
最後は公開ですよね(｀・ω・´)
s3? EC2? VPSサーバー？などなど公開する方法はいろいろでてきます。
で...サクっと簡単に公開したい時があると思います。
今回は、そこそこ簡単な方法で公開できるやつを書きます！
Nuxt.jsで何か作ってみる(｀・ω・´)
本題の前に簡単にNuxt.jsでサンプルプロジェクトみたいなものを作ってみます。
ちなみに...Nuxt.jsは、こういうものです。
Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う UI レンダリング に焦点を当てています。
※ https://ja.nuxtjs.org/guide より
1. プロジェクト作成
vue-cliを使います！
Nuxt.jsのテンプレートがあるので、サクッとできます。
vue init nuxt-community/starter-template プロジェクト名
2. npm install
cd プロジェクト名
npm install
3. 動かす(｀・ω・´)
npm run dev
これで出来ました！！
詳しくは、公式のドキュメントがあるので、そちらを見てください！
Nuxt.jsはドキュメントが豊富なので、いつも助かってます！
公開するよ(｀・ω・´)
ここからが本題です！
Netlify
Netlifyは、簡単に言うとホスティングサービスです。
詳しい説明は公式ページを見てください。
1. プロジェクト作成
GitHubなどにプロジェクトをpushします。
New site from Gitを押して、ここでリポジトリを選びます。
2. デプロイ
Build commandにnpm run generate
Publish directoryにdistをいれて、Deploy siteを押します。
これで、ビルドが走り、デプロイされます。
3. デプロイ完了
２，３分で、公開されます(｀・ω・´)
今後は、masterが更新される度に自動でビルド、デプロイしてくれます！
あ、注意が必要なのは、静的なページになりますので、SSRができません。
AWS Lambda
AWS Lambdaを使う方法を書こうと思いましたが、
12日の猫のアイコンの人がこの内容を書いたようなので、そちら↓↓をご覧ください。
Nuxt.js on AWS Lambda
Dockerを使う(｀・ω・´)
Dockerだけでは公開できませんが、AWS ECSやDockerが動くサーバーなどで利用することが可能です。
※参考にAWS Fargateを使うという内容を書こうと思いましたが...時間がたりませんでした(´・ω・`) ここは後日、書きます。。。
1. express
expressをいれます。
npm install express --save
2. expressでNuxt.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をしてください。
"scripts": {
"express": "node server/index.js"
}
うまくできていれば...npm run expressするとlocalhost:3000で動いているのが確認できます。
3. Dockerの作成
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は、こんな感じで。
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が動く所だとどこでも動きます(｀・ω・´)