みんなの「作ってみた」

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

2019/03/31

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