Web開発

【Vue + Netlify】NetlifyでVueサイトを公開してみた

2021.7.11(Sun)

目次

1. Netlifyとは？
2. Netlifyでサイトを公開してみる
   1. Netlifyにログイン
   2. 制作したサイトをGitHubへプッシュする
   3. Netlifyでデプロイ
   4. サイト変更内容をGitへプッシュ
   5. ドメイン名変更
3. まとめ

今回はNetlifyというサービスでVueで作ったサイトを公開してみたので、備忘録として手順をまとめていこうと思います。

実際に公開したサイトは以下になります。

How is the Weather in JP
https://howistheweather-jp.netlify.app

公開手順はとても簡単です。

それでは行きましょう。

Netlifyとは？

まずNetlifyについて簡単に説明します。

Netlifyとは静的なWebコンテンツのホスティングサービスです。

Netlifyの大きなメリットとしては、GitHub、GitLab、Bitbucketと連携でき、リポジトリに更新内容をプッシュするだけで公開サイトに変更を反映することができます。

その他にも公開用のブランチを自由に選択できたり、無料の範囲で独自ドメインを設定できたりもできます。

ポートフォリオサイトや簡単な静的サイトを公開する分にはとても良いサービスなので是非活用していきたいところです。

Netlify公式サイト
https://www.netlify.com/

Netlifyでサイトを公開してみる

それでは早速サイトを公開してみましょう。

今回、公開ようにVue + vue-cliでお天気サイトを作ってみました。

「OpenWeatherMap」の公開APIを使って、リアルタイムの日本の各都道府県のお天気情報を取得し、表示するサイトです。

下記公開済みサイトのURLです。

How is the Weather in JP
https://howistheweather-jp.netlify.app

それでは公開手順をみていきましょう。

Netlifyにログイン

まず、Netlifyでアカウントを作成して、ログインしてください。

下記からログイン可能です。

https://app.netlify.com/

ログインできたら、下記のようなマイページに飛ぶと思います。

制作したサイトをGitHubへプッシュする

続いては、ローカルで制作したサイトをGitHubへプッシュしておきます。

筆者はGitHubを使いました。

GitHubへのプッシュ手順は下記の記事を参照してください。
https://www.pc-koubou.jp/magazine/28571

add、commit、pushまでしておきましょう。

Netlifyでデプロイ

次は、GitHubでプッシュした内容をデプロイして、公開するまでの手順を紹介します。

Netlifyのマイページから、「Create a new site」を選択し、GitHubを選択します。

そこから、自分のGitHubアカウントをSearchして、選択します。

そして、デプロイするGitのリポジトリも合わせて選択します。

その後、デプロイ内容をもろもろ設定します。

基本的にデプロイするブランチはmainブランチ（旧masterブランチ）でいいと思います。

その他は基本的にデフォルトでいいですが、僕はyarnを使っていたので、「Build Command」の項目は「yarn build」にしました。

「Deploy site」を押せば、無事デプロイ完了です。

マイページの「site」に記載してあるURLにブラウザでアクセスしてみてください。

サイトが公開されていると思います。

サイト変更内容をGitへプッシュ

前述した通り、Netlifyはサイトの変更内容をGIt上にプッシュすると、即座に公開サイトへも変更点が反映されます。

変更内容をGItへプッシュ後、Netlifyのマイページより、「Deploy」からデプロイ内容を確認すると下記のように一覧でプッシュ内容が表示されています。

これでコミットの内容と変更点が確認できます。

ドメイン名変更

Netlifyでは独自にドメインを設定することも可能です。

素晴らしいですね！

やり方は、Netlifyのマイページから「Site view」>「Domain setting」と移動します。

「Add custom button」ボタンを押して、カスタムドメインを設定できます。

今回は「howistheweather-jp」というドメインを設定したいと思います。

※末尾に「.netlify.app」が付きます。

これで完了です。

ドメインが公開URLに反映されているはずです。

まとめ

いかがでしたでしょうか。

今回は、Netlifyで静的サイトを公開する方法について、まとめてみました。

Netlifyはこのように簡単にサイトを公開するにとても適しており、自作のポートフォリオなどを公開するにはうってつけです。

また、Gitのプッシュと連携して、サイトに変更点を反映してくれる機能は、とても便利ですね。

是非、皆さんも使ってみてください。

それでは本日はここまで！

お疲れ様でした！