Edited at
Vue.js #2Day 10

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

More than 1 year has passed since last update.

おはようございます!

最近、会社で隣の席の人のお菓子を勝手に食べていたら、パクパク怪獣と呼ばれ始めた人です(・ω・)

こちらは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. デプロイ完了

2,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を動かす


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.jsonscriptsにexpressを起動するコマンド追加します。

expressを立ち上げる前に必ずnpm run buildをしてください。


package.json

  "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が動く所だとどこでも動きます(`・ω・´)