ブログ構築 3. Nuxt.jsアプリを公開する #02
2019年10月12日に更新

Netlifyの初期セットアップとNuxt.jsのデプロイを行う

今回達成すること

NuxtプロジェクトをNetlifyにデプロイしていきます。

この記事を完走すると、インターネット上に"Hello Nuxt"を表示することができます。

Netlifyの料金は?

個人ブログを運用する程度だと基本的に無料で行えます。

詳細はこちらからご覧ください。

Netlifyの料金

NetlifyにBitbucketのリポジトリを追加する

まずはNetlifyにログインしましょう。

トップーページからNew Site from Gitのボタンをクリックします。

2019-08-11 15-50-38

Continuous DeploymentのメニューからBitbucketを選択してください。

今回デプロイするNuxtプロジェクトを選択しましょう。

2019-08-11 15-58-08

Netlifyアプリの初期設定を行う

次のページは以下のように設定していきます。

2019-08-11 16-10-06

Owner

チーム名を選択するところです。今回は特に変更しません。

Branch to deploy (画像の1番)

masterを選択します。

これはGitのマスターブランチをデプロイするという設定です。

Build command (画像の2番)

yarn build && yarn generateと記入してください。

これは公開するときに実行するコマンドを設定しています。

Nuxtプロジェクトのnuxt.config.jsで設定したbuildgenerateを実行します。

Publish directory (画像の3番)

distと記入します。

Nuxtはyarn generateコマンドを実行すると、Javascriptから生成した静的ファイルをdistディレクトリに吐き出します。

試しにターミナルで実行してみてください。distディレクトリが作成されます。

$ yarn generate

Deploy Site

Deploy Siteをクリックして設定を保存します。

保存したらプロジェクトのトップページに画面遷移し、デプロイが開始します。

Netlifyのデプロイ履歴の見方

Netlifyのメニュー、overview > Production deploysには過去のデプロイ履歴が表示されます。

オレンジの文字でBUILDING

デプロイ中ということを表しています。

まだ変更は反映されていません。

緑の文字でPUBLISHED

デプロイが無事完了するとこのマークになります。

現在公開中のバージョンに表示されます。

公開できたか確認する

デプロイが完了し緑の文字でPUBLISHEDと表示されたら、上に表示されるURLをクリックしてみましょう。

2019-08-11 16-22-01

Hello Nuxtが表示されていますね。

2019-08-11 16-27-14

これにてNetlifyのへのデプロイ作業は完了です。

終わりに

これであなただけのサイトがインターネット上に公開されました。

次回は、Netlifyで公開したこのサイトに、独自ドメインを設定していきます。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告