NetlifyでWebサイトを公開する方法

Netlifyというサービスを使って自分のポートフォリオサイトを公開してみました。
サイトを公開するには様々な方法がありますが、静的なサイトであれば専用のサービスを使うとお手軽です。

公開したサイトはここです→ https://shozzy.netlify.app/ [^new][^new2]

[^new]: 2020年6月現在、中身はNuxt.jsを用いたものに置き換わっています。とはいえ、Netlify側の設定は特に変わっていないので、この記事の内容はまだ有効です。
[^new2]: 2021年3月現在、ドメインがnetlify.comからnetlify.appに変更になっていますので、更新しました。

# 流れ
1. ローカルでサイトを作り、GitHubにpushしておく
2. Netlifyの初期設定と初回デプロイ
3. サイトを更新する


#1.ローカルでサイトを作り、GitHubにpushしておく

詳細は別記事にしますのでここでは割愛します。
今回はVue.js+Vuetifyで静的サイトとして制作しました。
普通に App.vue を編集して内容を作り込み、最終的に npm run build が正常に通るようにしておけばOKです。[^2]

[^2]: vue-cliを使っています。

出来上がったら、git で add, commit, push をしておきます。

#2.Netlifyの初期設定と初回デプロイ

####・Netlifyにログイン
入口はこちら https://app.netlify.com/
このあとGitHubと連携する予定なので、GitHubを使ってログインしておくと便利です。

####・GitHubとの連携[^3]
[^3]: 私はGitHubを使っていますが、GitLabやBitbucketにも対応しています。

画面右上の「New site from Git」をクリックします。
<img width="175" alt="スクリーンショット 2019-03-27 11.48.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/e6c8a01f-eb3b-e653-e339-c537ba0a2bd8.png">

「Create a new site」と表示されるので、下部のボタンから「GitHub」を選択します。
<img width="697" alt="スクリーンショット 2019-03-27 11.52.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/e7a37f47-3f6d-3d45-5272-0c68eaed5866.png">

自動的に一旦GitHub側に画面遷移します（別ウインドウが開きます）。
そこで、Netlifyからのアクセスを許可します。

「Repositry Access」は「All repositories」で問題ありません。次のステップで、Netlify側でどのリポジトリを公開するか選択できます。
他のリポジトリをNetlifyで公開する予定が無ければ、ここで「Only select repositories」にしても構いません。[^4]

[^4]: 後から変更できます。GitHub上で右上のアイコンクリック→Settings→Applications→Netlifyの「Configure」を押せば、設定にたどりつけます。

####・公開対象リポジトリの選択
元の画面に戻ったら、公開対象のリポジトリを選択します。
ここでは「portfolio」を選択しました。
<img width="697" alt="スクリーンショット 2019-03-27 11.57.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/c5b4527e-5f5e-ad3d-e7c1-4f72a0ebbfea.png">

####・デプロイの設定と初回デプロイ
公開対象のブランチと、デプロイ時に実行するビルドコマンド、公開対象のフォルダを設定します。
ここでは、masterブランチ、「npm run build」、「dist」を設定しました。
<img width="697" alt="スクリーンショット 2019-03-27 12.06.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/0ea8d511-579a-83d4-fbc2-6739a4a99772.png">

そして「Deploy Site」をクリックすると、デプロイ作業が開始されます。
デプロイは数十秒〜数分かかります。[^5]

[^5]: サイトの規模によると思います。

デプロイ処理中は、以下のように「Site deploy in progress」と表示されます。

<img width="660" alt="スクリーンショット 2019-03-27 12.09.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/f7ab6615-e4f9-ad74-a6cc-dea6054587bb.png">


完了すると、自動で割り当てられたURLが表示されます。
一旦そこをクリックして、正常にデプロイできたかブラウザで目視確認しましょう。
<img width="660" alt="スクリーンショット 2019-03-27 12.12.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/1282a68b-e768-7350-23d0-1e57043714ec.png">

####・URLの変更
自動で割り当てられたURLではかっこよく無いので、自分好みのサブドメインに変更します。[^6]

[^6]: 独自ドメインにもできますが、今回はそこまでは実施しませんでした。

「Site settings」を押し、遷移した画面で「Change site name」ボタンを押します。

以下のような画面が表示されるので、名称を適宜変更します。

- 変更前
<img width="574" alt="スクリーンショット 2019-03-27 12.17.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/22e0a206-c542-f72f-5aac-df3d7ec281ff.png">
- 変更後
<img width="574" alt="スクリーンショット 2019-03-27 12.18.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/6ee6ac3f-767d-3d63-b569-bb5146da72d7.png">

Saveを押したら完了です。
任意のサブドメインに変更することができました。[^7]
<img width="655" alt="スクリーンショット 2019-03-27 12.19.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/ec405c2e-ad8a-cf36-1a4d-8c3b5ea943c2.png">

[^7]: もちろん、すでに取得されていたらその名称には変更できません。取得されていない限り、一度削除してからすぐに設定し直すことも可能でした。

これで初回のデプロイは完了です。インターネット上にサイトが公開された状態になっています。

#3.サイトを更新する
サイトを一度制作したらもう更新をかけないなどということは、まずありえませんね。

Netlifyでは、GitHubにpushするだけで、それを自動でフックして更新してくれます。
（かしこい！便利！）


メニューの「Deploys」を開くと、更新履歴を確認できます。
<img width="271" alt="スクリーンショット 2019-03-27 12.25.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/0ae8eae8-d410-b243-c88a-fb89fafd8b8d.png">
<img width="650" alt="スクリーンショット 2019-03-27 12.31.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/bc513ee1-9517-a927-482d-35820a68c829.png">


この画面から、手動で明示的に再デプロイさせることも可能です。
（画面右側の「Trigger deploy」を押し、「Deploy site」を選択）
<img width="275" alt="スクリーンショット 2019-03-27 12.27.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/120785/661830fa-6918-a2da-436b-965c4f780a9c.png">

デプロイ中のログが画面に表示されるので、状況を確認できます。
「Site is live」というログが出たら、更新完了です。



#参考
https://cr-vue.mio3io.com/tutorials/netlify.html
https://qiita.com/tiwu_official/items/5d1e883b3190cd8de56f