Edited at

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

Netlifyというサービスを使って自分のポートフォリオサイトを公開してみました。

サイトを公開するには様々な方法がありますが、静的なサイトであれば専用のサービスを使うとお手軽です。

公開したサイトはここです→ https://shozzy.netlify.com/ 1


流れ


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

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

  3. サイトを更新する


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

詳細は別記事にしますのでここでは割愛します。

今回はVue.js+Vuetifyで静的サイトとして制作しました。

普通に App.vue を編集して内容を作り込み、最終的に npm run build が正常に通るようにしておけばOKです。2

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


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


・Netlifyにログイン

入口はこちら https://app.netlify.com/

このあとGitHubと連携する予定なので、GitHubを使ってログインしておくと便利です。


・GitHubとの連携3

画面右上の「New site from Git」をクリックします。

スクリーンショット 2019-03-27 11.48.34.png

「Create a new site」と表示されるので、下部のボタンから「GitHub」を選択します。

スクリーンショット 2019-03-27 11.52.02.png

自動的に一旦GitHub側に画面遷移します(別ウインドウが開きます)。

そこで、Netlifyからのアクセスを許可します。

「Repositry Access」は「All repositories」で問題ありません。次のステップで、Netlify側でどのリポジトリを公開するか選択できます。

他のリポジトリをNetlifyで公開する予定が無ければ、ここで「Only select repositories」にしても構いません。4


・公開対象リポジトリの選択

元の画面に戻ったら、公開対象のリポジトリを選択します。

ここでは「portfolio」を選択しました。

スクリーンショット 2019-03-27 11.57.53.png


・デプロイの設定と初回デプロイ

公開対象のブランチと、デプロイ時に実行するビルドコマンド、公開対象のフォルダを設定します。

ここでは、masterブランチ、「npm run build」、「dist」を設定しました。

スクリーンショット 2019-03-27 12.06.10.png

そして「Deploy Site」をクリックすると、デプロイ作業が開始されます。

デプロイは数十秒〜数分かかります。5

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

スクリーンショット 2019-03-27 12.09.06.png

完了すると、自動で割り当てられたURLが表示されます。

一旦そこをクリックして、正常にデプロイできたかブラウザで目視確認しましょう。

スクリーンショット 2019-03-27 12.12.22.png


・URLの変更

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

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

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


  • 変更前
    スクリーンショット 2019-03-27 12.17.10.png

  • 変更後
    スクリーンショット 2019-03-27 12.18.32.png

Saveを押したら完了です。

任意のサブドメインに変更することができました。7

スクリーンショット 2019-03-27 12.19.23.png

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


3.サイトを更新する

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

Netlifyでは、GitHubにpushするだけで、それを自動でフックして更新してくれます。

(かしこい!便利!)

メニューの「Deploys」を開くと、更新履歴を確認できます。

スクリーンショット 2019-03-27 12.25.17.png

スクリーンショット 2019-03-27 12.31.40.png

この画面から、手動で明示的に再デプロイさせることも可能です。

(画面右側の「Trigger deploy」を押し、「Deploy site」を選択)

スクリーンショット 2019-03-27 12.27.33.png

デプロイ中のログが画面に表示されるので、状況を確認できます。

「Site is live」というログが出たら、更新完了です。


参考

https://cr-vue.mio3io.com/tutorials/netlify.html

https://qiita.com/tiwu_official/items/5d1e883b3190cd8de56f





  1. 内容は随時ブラッシュアップしていきます。 



  2. vue-cliを使っています。 



  3. 私はGitHubを使っていますが、GitLabやBitbucketにも対応しています。 



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



  5. サイトの規模によると思います。 



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



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