7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.js + Netlifyでポートフォリオを作った

Posted at

技術選定

  • Nuxt.js (Vue.js)

    最近Nuxt.jsに興味があり使っていて、手っ取り早くSPAのページを作りたかったことが採用理由です。
    Nuxt自体について詳しくはこちら

  • Netlify

    静的ホスティングサイト。
    今まではCircleCI + Firebase等を使っていたが、Netlifyは噂を聞くが、自分では今まで使ったことがなかったので今回採用してみました。
    Netlify

開発環境

今回は下記環境で作業しました。

  • OS: High Sierra (MacBook Pro)
  • 開発ツール: Visual Studio Code

プロジェクト作成

npx create-nuxt-app <project-name>

途中で色々聞かれますが、今回は下記のようにしました。

? Project name portfolio
? Project description portfolio
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name <username>
? Choose a package manager yarn

今回は「Universal」モードにしていますが、nuxt generateで静的ファイルを生成して、Netlifyに上げる想定です。

また、UIフレームワークはVuetifyを利用することにしました。

起動確認

cd portfolio
yarn run dev

UIフレームワークにvuetify指定した状態で、デフォルトのまま起動しようとするとprettierでエラーになるようなので修正します。(2019/1/1時点)

また、eslintと併用しているのと、コマンドラインで使えるように prettier-eslint と prettier-eslint-cli を入れます

yarn add -D prettier-eslint prettier-eslint-cli

pretter-eslint実行

今回はエラーが出ていた layout/default.vue のみ修正しています

node_modules/.bin/prettier-eslint  layouts/default.vue --write

起動確認(2回目)

yarn run dev

http://localhost:3000/ にアクセスしてこんな感じで表示されれば成功です。
image.png

GitHubへPush

GitHubでポートフォリオ用のリポジトリを切って、pushします。

git init
git add .
git commit -m "first commit"
git remote add origin <gitのリポジトリURL>
git push origin master

Netlifyにデプロイする

まず Netlify にログインします。
ログインはGitHubのアカウントでできます。

image.png
New site from Git から新しくサイトを作ります

image.png
「GitHub」を選択します

別ウィンドウでアクセス許可の画面が立ち上がるので「Authorize Netlify by Netlify」をクリックし、画面に従って設定していきます。

image.png
Netlifyの画面に戻ってビルドを走らせるリポジトリを選択します。

次にビルドの設定を行っていきます。今回は下記のように設定。

設定項目 設定値
Branch to deploy master
Build Command yarn generate
Publish directory dist

image.png

設定をしたら、「Deploy site」をクリックします。

ビルドが通れば、デプロイ完了となります。

デフォルトだとサブドメインがランダムに割り当てられてわかりにくいので、Domain Settingから subdomainは任意のものにできます。
image.png

この状態で、ビルドが完了すると、URLにアクセスして確認ができます。

コーディング

デプロイまでの環境ができたのであとはひたすらコーディングです。
今回はポートフォリオを作りました。

作ったサイトはこちら
https://mintsu-portfolio.netlify.com/

まとめ

Netlifyを使ってみての感想になります。

今までCircleCI + Firebaseでホスティングをしていたのですが、Netlifyを使うと、すべてNetlifyのUI上で設定が済むので非常に楽でした。

また、プロダクションブランチ以外に対しても、プルリクエストを出したブランチのプレビューも見ることができたりする点も良かったです。

単純に静的ファイルをデプロイしたいときはもちろん使えるのと、今回のようにnuxt generateした結果をデプロイしたいといった場合に、Netlify側でビルドしてくれるので非常に便利でした。

ただし、CIツールではないので、自動テスト、テストカバレッジ取得、デプロイなどビルドパイプラインをガッツリ作りたい場合にはやはりCIツールとの連携が必要になってくると思うので必要に応じて使い分けていきたいと思います

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?