search
LoginSignup
62

More than 1 year has passed since last update.

posted at

updated at

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

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

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

流れ

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

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

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

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

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

・Netlifyにログイン

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

・GitHubとの連携4

画面右上の「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」にしても構いません。5

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

元の画面に戻ったら、公開対象のリポジトリを選択します。
ここでは「portfolio」を選択しました。
スクリーンショット 2019-03-27 11.57.53.png

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

公開対象のブランチと、デプロイ時に実行するビルドコマンド、公開対象のフォルダを設定します。
ここでは、masterブランチ、「npm run build」、「dist」を設定しました。
スクリーンショット 2019-03-27 12.06.10.png

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

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

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

完了すると、自動で割り当てられたURLが表示されます。
一旦そこをクリックして、正常にデプロイできたかブラウザで目視確認しましょう。
スクリーンショット 2019-03-27 12.12.22.png

・URLの変更

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

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

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

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

Saveを押したら完了です。
任意のサブドメインに変更することができました。8
スクリーンショット 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. 2020年6月現在、中身はNuxt.jsを用いたものに置き換わっています。とはいえ、Netlify側の設定は特に変わっていないので、この記事の内容はまだ有効です。 

  2. 2021年3月現在、ドメインがnetlify.comからnetlify.appに変更になっていますので、更新しました。 

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

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

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
62