今回は「Netlifyでウェブサイトを作る」という内容で技術紹介をします。
ウェブサイトを公開するためにはサーバーが必要となります。当たり前ですが。

私がウェブサイトというものを触り出したのが15年前~20年前。。。
当時の私は高校生で、ゲームの攻略情報みたいな記事をHTMLで作成して公開していました。ブログとかは存在しなかったので、すべてが自力でサーバーを借りる必要があるというところから共有サーバーとは？、VPSとは？、自宅サーバーとは？
HTMLを表示させるためのアプリケーション？、Apache？、配置先ディレクトリ？、CGI？
サーバーにHTMLファイルを転送する必要がある。FTP？、SCP？
などなど、たくさんの疑問符を解決しながらサイトを公開したものです。

2023年現在では、サクッとウェブサイトが公開できるようになっているようです。（楽でいいね！）
今回は以下のサービスを使って、ウェブサイトの公開と更新の作業について紹介したいと思います。

Netlify

  • ウェブサイトをホスティングするサービスです。サーバーリソースを提供しているサービスでこのサービスの上でウェブサイトを動作させます。
  • ホスティング以外にも、ビルドやデプロイ用のリソースも無料で使えるので、例えばVue等で作ったウェブアプリケーションをビルドして→デプロイという構成も可能です。
  • 今回はビルドなしで、HTMLファイルをそのままホスティングします。

Github

  • ソースコードを管理するサービスですね。バージョン管理のために用います。
  • NetlifyはGithubとの連携が豊富で、いろいろな連携機能があります。
  • 今回は単純にHTMlファイルの保存先として利用します。

以上です。この２つのサービスがあればウェブサイトを管理・公開することができます。

1. アカウント準備

GitHubのアカウントとNetlifyのアカウントを準備します。特に条件等はなく、無料で作れるのでサイトに行って準備ください。
NetlifyはGitHubのアカウントを持っているとすぐに作成できるので、GitHub→Netlifyの順で作成するのがおすすめです。

  • https://github.com/
  • https://app.netlify.com/
    ※ NetlifyアカウントはGitHub、GitLab、Bitbucketのようなソースコードリポジトリのアカウントから作成することができるので、お試しください。
2. チームの確認

Netlifyアカウントの作成が完了すると、チームが作成されます。
チームは課金単位となっていて、無料のプランにはビルド時間やネットワーク帯域などの制限があります。

無料のプランは「Starter」になりますが、無料でも月 100GBの帯域、300分のビルド時間の枠が使えます。
一つ上のプラン「Pro」は 一人あたり月 $19 で、チームメンバーが複数いるとその分課金対象となります。
帯域的にもビルド時間的にも「Starter」十分だと思います。

3. Githubにリポジトリを作成

Githubにリポジトリを作成します。

作成したリポジトリに「HTMLファイル」をpushしておいてください。
index.htmlファイルを作ると、Netlifyで採番されたURLをクリックするとトップページとして表示されるので、必ず index.html で作成しましょう。

4. Netlifyでサイト作成

Netlifyのチームにサイトを作成します。サイトはGitHub等のソースコードリポジトリ連携させて管理します。
ソースコードリポジトリにプッシュされたHTMLファイルをNetlifyのサイトとしてデプロイする構成になります。
開発者はソースコードリポジトリにHTMLファイルをプッシュする作業だけをして、デプロイはNetlifyに任せることができます。
今回は単純にHTMLファイルをプッシュしますが、Vueチームに追加できるサイトの数は制限が無いので、この点でも「Starter」で十分ですね。
サイトの追加は Team overviewの「Import from Git」からが簡単です。

GitHubを選択します。

自分のリポジトリ一覧が表示されるので、先程作成した「sample-netlify」を選択します。

ビルドに関する設定をします。
「Branch to deploy」にデプロイを検知するブランチを記載します。
下記の設定だと「main」リポジトリにコミットやマージがあった場合に、ビルド・デプロイを実行します。
今回はHTMLをディレクトリ直下に配置しているので、他の設定は不要です。
例えば、ビルドした成果物が「dist」フォルダ以下に生成されるなら、「publish directory」を「dist」に設定すると、設定したディレクトリの中身をデプロイします。

Deploy siteを実行すると、初回のデプロイを実行します。
最初のデプロイ時、Netlify側でランダムなURLが採番されます。
デプロイが完了していれば、採番されたURLにアクセスすると、GithubにプッシュしたHTMLファイルが表示されます。

5. ウェブサイトの更新

ウェブサイトの更新をする場合には、監視対象となっている「main」ブランチにプッシュやマージすれば良いです。

「main」ブランチにプッシュすると。Netlify側で「main」ブランチの変更を検知してビルド・デプロイが自動で開始します。

対象のコミットが Published になると、デプロイ完了です。
再度、サイトにアクセスすると更新されています。

6. まとめ

GithubとNetlifyを設定すればウェブサイトの公開・メンテナンスが簡単にできることに感動しました。
いろいろやらなくても、Githubにpushすれば後はOK！ってのがいいですね。
Netlifyにはカスタムドメインや、プレビューサイト（デプロイ前に動作確認するためのURL）やFunctions（サーバーサイドの処理）などの紹介しきれない機能がたくさんあります。
いろいろなウェブサイトの公開方法がありますが、エンジニアがメンテナンスするならGithubとNetlifyでサクッと構築してもいいのかな。と思いました。