Netlifyへの自動デプロイをしよう

このチュートリアルでは、Vue CLI で作成したVue.jsのプロジェクトを、Netlify で手動デプロイおよび自動デプロイするまでの手順を説明します。

Netlify とは?

静的サイト向けの高機能なホスティングサービスです。 Git のホスティングサービスと連携した自動デプロイ、SSL/HTTPS を無料で利用できます。 英語のサイトですが、直感的な作りになっているため Google 翻訳などを利用すれば問題なく使用できるでしょう。 特に、ポートフォリオなどの静的サイトには最適です。 ここでは、GitHub アカウントを使った登録方法を説明します。

ちなみに、このサイトも Netlify(+VuePress) を使って公開されています!

Netlify の登録

「signup」ページを開き、認証方法に「GitHub」を選択します。

キャプチャ2.1

別ウィンドウで GitHub へ認証の許可を求める画面が表示されるので、内容に問題がなければ「Authorize」ボタンで承認します。 登録はこれで完了です。 管理画面を開いてみましょう。

ローカルビルドからのデプロイ

ローカルでビルドしたファイルを、Netlify に公開してみましょう。

ビルドファイルを圧縮

あらかじめ、dist フォルダと index.html を選択して ZIP 形式で圧縮します。

ZIP ファイルのアップロード

管理画面のトップページは、次のようになっています。 画面上にある点線で囲まれた枠に ZIP ファイルをドラッグすると、ワンステップでウェブサイトを公開できます。

キャプチャ2.2

ZIPファイルを、1 の点線のエリアにドラッグします。 少し待つと、次のような画面が表示されます。

キャプチャ2.3

サイトの確認

2 の URL を開くと、ウェブサイトが公開されているのが確認できます。

キャプチャ2.4

GitHub からの自動デプロイ

つづいて、GitHub のリポジトリと連携した自動デプロイをしてみましょう。

リポジトリの作成

予め用意した GitHub のリポジトリに、Vue CLI で作成したプロジェクトをPushします。 好きな名前で作成してください。

キャプチャ2.8

ビルドファイルではなく、このキャプチャのようにプロジェクトルートからのソースコードの状態でリポジトリを作成します。

新しいサイトの作成

Netlify の管理画面トップの右上にある1 「New site from Git」を選択します。

キャプチャ2.9

Git ホスティングの選択

Git ホスティングサービスの選択画面で 2 「GitHub」を選択します。 認証方法が同じなら、そのままリポジトリ一覧を取得しますが、別の認証方法の場合は再度GitHub認証を求められる場合があります。

キャプチャ2.10

リポジトリの選択

GitHubアカウントにあるリポジトリの一覧が取得されるので、Netlify で公開したいリポジトリを選択しましょう。

キャプチャ2.11

ビルド設定

次の画面で、ビルドコマンドとフォルダの設定をします。 4 のブランチは基本「master」ですが、特定のブランチを公開したい場合は変更します。

キャプチャ2.12

5 のビルドコマンドは、ローカルでのビルドと同じものを設定します。

npm run build

6 の公開ディレクトリは、index.html のあるフォルダを指します。 デフォルトの設定では、dist フォルダの中に index.html が作成されるため次のように設定します。

dist

Vue CLI で作成された package.json や webpack の設定を編集していなければ、この状態でデプロイできます。

ビルド

初回ビルドはモジュールのインストールに時間がかかるため、ゆっくり待ちましょう。 ビルドログから今何をしているか確認することもできます。

ビルドが終わると、ページの上部に 7 「Preview deploy」というリンクが表示されます。 公開されたサイトを確認してみましょう! 画面は静的サイトをアップロードしたものと同じなので省略します。 一度設定したあとは、連携している GitHub のリポジトリに Push するだけで差分を取得して自動的にデプロイをします。

サイトの削除

サイトを削除したい場合は、「キャプチャ2.3」「3 Site settings」ページを開き、下の方にある「Delete Site」から完全に削除できます。

キャプチャ2.5

サブドメインの変更

デフォルトではランダムな長い URL になっていますが、これはサイト名を変えることで好きな文字に変更できます。 「キャプチャ2.3」「4 Domain settings」のページを開き、「Cutom Domain」の「…」から「Edit site name」を選択します。

キャプチャ2.6

すでに使用されていなければ、好きなサブドメインに変更できます。

キャプチャ2.7

ここでは詳しくは説明しませんが、独自ドメインの設定も可能です。

最近では、紹介したような高機能なホスティングサービスや、バックエンドサービスが数多く提供されています。 こういったサービスを利用することで、Vue.js で作成したアプリケーションを手軽にウェブ上に公開できます。