無料で使えるAzure Static Web AppsにGatsbyブログを爆速でデプロイする

## Azure Static Web Appsを無料で試す

みなさん、Azure Static Web Apps知ってますか？

私はpreviewのときから使ってまして、Gatsby製の[個人ブログ](https://dev.thanaism.com)をデプロイしていました。

なにがいいかって、**とにかくお手軽**なんです。

Gatsbyブログをただホストするだけなら**実作業10分もいらないレベル**です。
もちろん、開発をしているエンジニアじゃなくても全然問題ありません。実際に私はインフラ寄りのエンジニアでゴリゴリの開発畑にいるわけでは決してありません。

これってすごいことじゃないですか？

今回は、とにかくスピード勝負でGatsbyブログをデプロイするところまで目指します。
静的なブログをホストするだけならAzureのBlob StorageやawsのS3でも可能ですが、時代は変わりました。

**Azure Static Web Appsなら無料かつ爆速でGitHub ActionsによるCI/CDプロセスまで完成します。**
簡単に言えば、GitHubに記事をpushしたら自動で更新できちゃうサイトがサクッと完成するということです。

さらに今回はせっかくなのでコンテナ上に開発環境を構築して、ちょっとナウい（死語）感じでやっていきましょうー！

## 環境の準備

### ツール類のインストール

MacでもWindowsでも以下を使いますので準備してください。

- [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
- [Remote - Containers拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
- [Docker Desktop](https://www.docker.com/products/docker-desktop)

（※これらのツールはすでにインストールされてる方も多いと思うので作業時間に含めない想定で冒頭の話をしています）

### devcontainerの作成


あらかじめDocker Desktopは起動しておいてください。

Visual Studio Codeで新しいディレクトリを開きます。

新しいディレクトリが開いたら、`Ctrl`+`Shift`+`P`を押して`add`と入力します。

> Remote-Containers: Add Development Container Configuration Files...

という項目が出てくるので選んでください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/5e499e79-ae76-26c8-05bc-ad35eb5e6370.png)

さらに開いた項目の中から`Show All Definitions...` -> `Node.js & TypeScript` -> `16`と選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/4883a1cd-ef9b-9d8e-4841-d4592e2aec26.png)

すると、上の画像のように`.devcontainer`ディレクトリの中に`Dockerfile`ができているので、下記のように書き換えます。

```Dockerfile:元の状態
# [Optional] Uncomment if you want to install more global node packages
# RUN su node -c "npm install -g <your-package-list -here>"
```

```Dockerfile:書き換え後
# [Optional] Uncomment if you want to install more global node packages
RUN su node -c "npm install -g gatsby-cli"
```
書き換えて上書き保存したら、画面左下の緑色の部分をクリックして出てきた画面から`Reopen in Container`を選択します。

たったこれだけで開発用のコンテナ環境が作成されます。初回のみイメージのビルドに数分程度の時間がかかります。

![スクリーンショット 2021-08-21 0.09.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/bed6b0ad-cbe5-2e3b-e122-2c06901c3e1b.jpeg)

画面左下がこんな状態になっていればOKです。これでコンテナ上に最低限の開発環境が出来上がりました。

![スクリーンショット 2021-08-21 1.27.36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/01b05784-f8a6-7772-4951-dde175429036.jpeg)

ハア〜、**爆速**。

## 好きなGatsbyスターターを選ぶ

[Gatsbyのサイト](https://www.gatsbyjs.com/starters/?)に行って、好きなスターターを選びます。

今回は私が個人ブログでも使っている[gatsby-casper](https://www.gatsbyjs.com/starters/scttcper/gatsby-casper/)で説明します。

![fdc2bc21be7b43a973e06a433f1ecb7f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/76c929eb-98fb-d9d4-25ee-b88b20f85e95.jpeg)

ページに書いてあるとおり、以下のコマンドでスターターを自分の手元で初期化します。

```sh
gatsby new my-gatsby-project https://github.com/scttcper/gatsby-casper
```

これにも多少時間がかかりますので待ちます。

## ブログをローカル環境で動かしてみる

先ほどのコマンドが無事に完了したら、ターミナル上で対象のディレクトリに移動します。

```sh
cd my-gatsby-project/
```

移動先で以下のコマンドを打てば、localhostにブログが立ち上がります。

```sh
gatsby develop
```
しばらく待つと以下のような表示が出ますので、`Ctrl`を押しながら`http://localhost:8000/`をクリックしてアクセスしてみます。

```
⠀
You can now view gatsby-casper in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 27.096s
```

以下のような画面が開いていれば大成功です。

![スクリーンショット 2021-08-21 0.30.02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/ad6ea762-9d32-3ad0-5f88-08117cff9257.jpeg)

せっかくなので新しい記事を追加してみましょう。

記事は、`my-gatsby-project/src/content/`ディレクトリ配下に入れればOKです。

今回は以下のような`test-article.md`を追加することにします。先ほどの`gatsby develop`は実行したままでかまいません。

```md:test-article.md
---
layout: post
title: テスト投稿だぞ
image: img/callum-shaw-555357-unsplash.jpg
author: [Ghost]
date: 2100-01-01T10:00:00.000Z
tags:
  - Source
excerpt: 誰がなんと言おうとテスト
---

## テスト
ロレム・イプサム

### ロレム・イプサム
世界で一番適当なテスト記事です。
```

トップページにテスト記事が追加されます。途中でバグったらブラウザを更新してみてください。

![スクリーンショット 2021-08-25 22.11.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/55cb021f-6167-d714-87d6-f1cb15fd10d8.jpeg)

ということで、ブログが一応ローカルで動きましたのでコミットしてご自身のGitHubにpushしましょう。

```
git add .
git commit -m "add an article"
git remote add origin <your-github-repository-address>
git push -u origin HEAD
```

#### 参考
github用のssh鍵にホストマシン上で作ったものを使いまわす場合は、以下のようにします。
（ホストマシン上のターミナルで実施します）

```
ssh-keygen -t ed25519
add-ssh ~/.ssh/id_ed25519
```
## Static Web Appsにホストする

### リソースの作成

簡単のため、Azureのアカウント登録は済んでいるものとします。

1. [Azure Portal](https://portal.azure.com/learn.docs.microsoft.com)にサインインします。
1. 上部のバーで、Static Web Apps を検索します。
1. Static Web Apps を選択します。
1. [作成] を選択します。

以下のような画面になるので、好きなように名前をつけてください。
リソースグループもお好みで。
（なければ適当な名前で新規作成すればよいです）

![スクリーンショット 2021-08-21 0.47.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/d873879a-5256-7956-ea1e-021784dab99d.jpeg)

GitHubアカウントを連携します。連携できたら先ほどpushした先のリポジトリを選んでください。

あたらしい項目が出てきますので、`Gatsby`を選択して[作成]しましょう。

![スクリーンショット 2021-08-21 1.02.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/1004a9b2-cb65-2c55-8f7f-d9ee66c36263.jpeg)

### GitHub Actionsの実行

作成が完了したリソースに移動すると`GitHub アクションの実行`というリンクがあるのでポチります。

![スクリーンショット 2021-08-21 1.05.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/cae3bd0c-c142-1965-240a-5a2b9511e170.jpeg)

GitHubアクションが起動しますので完了するまで待ちます。
成功するとこんな感じで緑色のチェックが付きます。

![スクリーンショット 2021-08-21 1.09.58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/64ed6fcf-2af1-059b-651d-43b7aa38a8c0.jpeg)

さっきクリックした`GitHub アクションの実行`の上にURLがあるのでアクセスするとブログが公開されています。

![スクリーンショット 2021-08-21 1.12.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599221/c8a62eb2-b8a2-f311-ff52-acabb7f5ce5d.jpeg)

ハア〜、**爆速**。

## おわりに

なんと完全無料かつ、ほんの数個のコマンドを叩く程度でCI/CDなブログが爆速でデプロイできてしまいました。

コマンドの実行待ち時間を除けば本当に5分とか10分くらいの作業なのではないでしょうか。

本記事をキッカケに、もし開発に興味がわいた方がいるなら、もう少し本格的なWebサイト作成にも挑戦してみるのもありかもしれません。
Azure Static Web AppsではAzure FunctionsをAPIとして抱えたサーバレスな構成の静的アプリも簡単に実現することができますよ〜！