Qiita初投稿。Go6 Advent Calendar 2019 21日目の投稿です。
Go歴浅いですが、月に一度、Women Who Go Tokyo でスタッフをしながら、ゆる〜く勉強をさせていただいております。
まず、最初にあやまっておく
Go の AdventCalendar なのに、Go のコードが1行たりとも出てきません(HUGOの部分だけ)。Go のなんたるかを期待してきてくれた人、ごめんなさい。
そして、HUGO は Cloud Runより Cloud Build + Firebase Hosting がいいよ! という @tenntennさんのツッコミアドバイスはちょっと脇に置いておく..(次回はそれを試してみたいと思います)
Cloud Runでは、課金プランを使用します。
HUGOを複数サイトで動的に切り替えて運用するとかなら Cloud Runでやるのもアリかもしれないけど、単に HUGO を完全無料で運用したい場合は、GitHub Pages がおすすめらしいです by @sakajunquality 氏。
このハンズオンは、自分メモのオレオレハンズオンです。
登場人物
HUGO
Goでつくられた 静的Webサイトを構築するジェネレーターです。記事はmarkdown形式でかくことができます。
おしゃれなテーマがいっぱい。
https://themes.gohugo.io/
Cloud Run
GCPのサーバーレスサービス。コンテナをサーバーレスで実行できます。
nginx
静的コンテンツ(サーバーにあるhtmlとかのファイル)を高速に配信するように設計されているオープンソースなWebサーバー。アプリサーバーと連携して動的配信も可能。イベント駆動で動いてくれる。ロードバランサーやHTTPキャッシュとしても利用できる。
Git
Gitに慣れるためちょっと使ってみた。
最近ここで遊んでます。
https://learngitbranching.js.org
GCP
みんな大好きGCP。
GCR
Container Registry。Googleが提供するPrivateなコンテナイメージのリポジトリ。Docker イメージ マニフェスト V2 と OCI(Container Initiative) イメージをサポートしている。
Firebase
今回は Firebase Hosting を使用。
結果だけ見たい人
内容が長くなってしまったので、何がどうだったの?を貼っておきます。
Xサーバー + WordPress
わたしのブログサイト。めちゃ遅いです。
![スクリーンショット 2019-12-16 1.52.58.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F313538b9-257f-8a08-dcba-bc852e2bd1df.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=788c2762a480d4b04103c6b5ef573845)
Cloud Run + nginx + HUGO
動的・静的な違い、コンテンツがない等も関係するかもしれませんが、めちゃはやいです。
![スクリーンショット 2019-12-16 1.52.04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fc700415e-d3bf-93be-d6d5-f44fedbaf628.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=08074759fd251e0a6d6da2a16693fc82)
FirebaseHosting + Cloud Run + nginx + HUGO
![スクリーンショット 2019-12-18 12.48.09.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F81dd0b5d-2447-8734-a66b-99a5bd81c346.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3638314f9d869ce2b8cdd4214554c5c4)
作ったサイトは誰もアクセスしないので、自分がアクセスするまでインスタンスは起動していないのですが、日をおいてアクセスた時でもページが寸秒で表示さるのは感動します。
全体の流れ
- HUGO にチャレンジ
- GCP でプロジェクトを作成する
- Cloud Run API を有効化する
- HUGO + nginx を Docker で動かす
- HUGO + nginx を GCR にホスティングし Cloud Run にデプロイする
- Firebase のプロジェクトを作成する
- Firebase Hosting 経由で Cloud Run にアクセスする
HUGO にチャレンジ
はじめに、HUGO をローカルで動かしてみましょう。
HUGO をインストールする
brew install hugo
でHugoをインストールします。brewをしばらく使ってない人はbrew update
もしましょう。
$ brew install hugo
サイトのプロジェクトを作成する
任意のディレクトリに移動し、hugo new site {サイト名}
でHUGOのプロジェクトを作ります。
$ hugo new site mikkegt
以下のようになればOK。
Congratulations! Your new Hugo site is created in /Users/mikke/go/src/mikkegt.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Gitの設定
gitのリポジトリも作っておきます。
$ cd mikkegt/
$ git init
Initialized empty Git repository in /Users/mikke/go/src/mikkegt/.git/
gitに管理されたくないファイルを設定します。
$ touch .gitignore
.gitignoreに以下を記載します。
+ .DS_Store
+ /public
ここまでの作業を保存しておきます。
$ git add .
$ git commit -m "initial commit"
[master (root-commit) 5279ef0] initial commit
3 files changed, 11 insertions(+)
create mode 100644 .gitignore
create mode 100644 archetypes/default.md
create mode 100644 config.toml
テーマの選定とダウンロード
https://themes.gohugo.io/ ここからテーマを選びます。(たくさんあって迷うです)
↓ これにしてみました。
このページに適用方法も書いてあります。以下を実行。
$ git submodule add https://github.com/reuixiy/hugo-theme-meme.git themes/meme
Cloning into '/Users/mikke/go/src/mikkegt/themes/meme'...
remote: Enumerating objects: 64, done.
remote: Counting objects: 100% (64/64), done.
remote: Compressing objects: 100% (38/38), done.
remote: Total 1811 (delta 16), reused 46 (delta 12), pack-reused 1747
Receiving objects: 100% (1811/1811), 7.76 MiB | 2.53 MiB/s, done.
Resolving deltas: 100% (936/936), done.
テーマの更新があった場合は、git submodule update --rebase --remote
で最新にします。
作業を保存。
$ git add .
$ git commit -m "add theme meme"
[master 16dd028] add theme meme
2 files changed, 4 insertions(+)
create mode 100644 .gitmodules
create mode 160000 themes/meme
HUGO を起動する
hugo server
で HUGO を起動します。
$ hugo server
Building sites … WARN 2019/11/25 19:12:02 found no layout file for "HTML" for "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/11/25 19:12:02 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/11/25 19:12:02 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
+------------------+----+
Pages | 3
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 37 ms
Watching for changes in /Users/mikke/go/src/mikkegt/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/mikke/go/src/mikkegt/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
たちあがったところで、以下にアクセスします。
![スクリーンショット 2019-11-25 19.17.26.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fcb937d7e-88ad-b226-3873-c83e2828a32b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f2a8adfbbc0616eda7e33be52346dc9d)
・・・真っ白やんけ。
テーマを適用する
layoutsとstaticディレクトリのコピー
git submodule
してきたテーマディレクトリにある「layouts」と「static」をプロジェクトのルートディレクトリにコピーします(上書き)。
![meme 2019-11-25 19-29-03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fad9a5d51-69bd-7980-86bc-8e8391621d2b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d4f6557b80350ae48ca1bc76416f392e)
config.tomlのコピー
テーマディレクトリの中から config.toml
を探し、プロジェクトのルートディレクトリにコピーします(上書き)。
![en-us 2019-11-25 19-41-30.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fd4cb9d7a-c863-04ff-923b-a28c6badc0cd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c03d27e3d31a4e13479ea0e3a7a59d7a)
control+c
で HUGO をストップし、もう一度 hugo server
します。
$ hugo server
以下にアクセス。
![スクリーンショット 2019-11-25 19.56.17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F79ad0353-6bc9-c793-3756-0fc012a5c30e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=68ffc69a73842dcca2b8606a8a2ea117)
できました! かわいい✨✨✨
作業を保存
get status
をしたら、themes/.DS_Store
というのができていたので、この除外設定もしておきます。
.gitignoreを開いて「**/.DS_Store」を追加しました。(あってるかな?)
+ .DS_Store
+ **/.DS_Store
+ /public
以下で作業を保存します。
$ git add .
$ git commit -m "Apply theme"
HUGO を Cloud Run にデプロイする
Cloud SDK が必要です。インストールはこちらを参考にしてください。
https://cloud.google.com/sdk/downloads?hl=JA
以降、以下の Firebase Hosting + Cloud Run を参考にしながらすすめます。
https://firebase.google.com/docs/hosting/cloud-run#write
gcloud components のインストールと更新
gcloud components のインストールと更新をします。
$ gcloud components install beta
$ gcloud components update
GCPでプロジェクトを作成する
GCPのコンソールを開きます。
https://console.cloud.google.com/
「新しいプロジェクト」をクリックします。
任意のプロジェクト名を入力します。
新しく作成したプロジェクトに切り替えます。
Cloud Run API を有効にする
コンソソールのメニューを開き「Cloud Run」をクリックします。
[CLOUD RUN の使用を開始する]をクリックします。
Dockerfileを作成する
プロジェクトのルートディレクトリ Dockerfile
を作成します。
# Use a nginx Docker image
FROM nginx
# Copy the static HTMLs to the nginx directory
COPY public /usr/share/nginx/html
# Copy the nginx configuration template to the nginx config directory
COPY nginx/default.template /etc/nginx/conf.d/default.template
# Substitute the environment variables and generate the final config
CMD envsubst < /etc/nginx/conf.d/default.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'
↑ COPY public
って書いてるけど、先ほどのスクショを見るとルートディレクトリに publicディレクトリがないのでした。
HUGO を実行する
引数なしで hugo
を実行します。
$ hugo
publicディレクトリが作成されました。
![スクリーンショット 2019-11-27 0.51.37.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fb58d1fcd-df8c-2a0a-dedb-185043dbd661.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=febdab2c47a8f2da00b93c63fe9ce4ab)
### 作業を保存
@peaceiris さんに、ご指摘を受けました!
$ git add public/
$ git commit -m "add hugo public"
↑ ここは
.gitignore に public を書いているようなので、上のコマンドは実行できていないと思います。 Hugo プロジェクトにおいて public 以下のファイルは生成物なので Git 管理下に置く必要もありません。
とのことで、ありがとうございました
default.template を作成する
プロジェクトのルートディレクトリに「nginx」ディレクトリを作成し、その中に「default.template」を作成します。
![2019-11-27 01-20-03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F109ce15e-c38c-0d30-8589-558508b1e327.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=80add57563901cdfb4779ca27ff0afff)
nginx/default.template
に以下を書きます。
server {
listen ${PORT};
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
ここまでの作業を保存
$ git add Dockerfile nginx/default.template
$ git commit -m "add docker settings"
Dockerで試す
ローカルの Docker環境で動くか試します。Dockerがない人はこちらを参考に。
http://docs.docker.jp/index.html
以下を実行します。
$ docker build -t mikkegt .
$ docker run -p 1312:1312 -e PORT=1312 mikkegt
以下にアクセスします。
http://localhost:1312/
![スクリーンショット 2019-11-27 2.14.57.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F8c46e391-0338-17ba-6108-1008af1a615d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=957fc2df18644848ed8a5b32b0fa75e5)
左がローカルで動いているサイトで、右がDockerで動いています。
SDKの設定を確認する
gcloud config list
でSDKの設定を確認します。
$ gcloud config list
[core]
account = xxx@gmail.com
disable_usage_reporting = False
project = hogehoge
別のプロジェクトが設定されていたので、gcloud config set project {プロジェクトID}
で紐付けを変更します。
$ gcloud config set project mikkegt
Updated property [core/project].
Cloud Build で GCR に保存する
コンテナイメージをビルドし、Container Registry に保存します。
gcloud builds submit --tag {ホスト名}/{GCPのプロジェクトID}/{任意のイメージ名}
$ gcloud builds submit --tag gcr.io/mikkegt/mikkegt-cloud-run
:
DONE
--------------------------------------------------------------------------------
ID CREATE_TIME DURATION SOURCE IMAGES STATUS
a5108f06-e825-499f-be8c-0643f63b0156 2019-12-15T15:38:00+00:00 20S gs://mikkegt_cloudbuild/source/1576424276.66-d1cbb9e33c544a729f639331bedeca2b.tgz gcr.io/mikkegt/mikkegt-cloud-run (+1 more) SUCCESS
DONE!! SUCCESS!!
どこに保存されたのか?
コンテナイメージがどこに保存されたのかは、GCPのコンソールから確認することができます。コンソールメニューから「Container Registry」を開くと見ることができます。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F0d58b368-4251-3ac9-f549-6b25000e0426.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=20b29ae9fe71133d9487df2f7141fab6)
次のコマンドで、先ほど GCR に保存したコンテナイメージを Cloud Run にデプロイします。
gcloud beta run deploy {イメージ名} --image {ホスト名}/{GCPのプロジェクトID}/{任意のイメージ名}
$ gcloud beta run deploy mikkegt-cloud-run --image gcr.io/mikkegt/mikkegt-cloud-run
Please choose a target platform:
[1] Cloud Run (fully managed)
[2] Cloud Run for Anthos deployed on Google Cloud
[3] Cloud Run for Anthos deployed on VMware
[4] cancel
Please enter your numeric choice: 1
[1] Cloud Run (fully managed)
を選択します。
[1]の Cloud Run (fully managed) は、Googleがインフラの面倒をすべて管理してくれます。[2]と[3]はKnativeというKubernetes上でサーバーレスを実現するプラットフォームを、自作したクラスターにデプロイします。クラスター内でスケーリングやプロビジョニングが自動で行われます。
Please specify a region: で [1] asia-northeast1
リージョンを選択します。
Please specify a region:
[1] asia-northeast1
[2] europe-west1
[3] us-central1
[4] us-east1
[5] cancel
Please enter your numeric choice: 1
y
を選択。
Allow unauthenticated invocations to [mikkegt-cloud-run] (y/N)? y
Deploying container to Cloud Run service [mikkegt-cloud-run] in project [mikkegt] region [asia-northeast1]
✓ Deploying new service... Done.
✓ Creating Revision... Revision deployment finished. Waiting for health check to begin.
✓ Routing traffic...
✓ Setting IAM Policy...
Done.
Service [mikkegt-cloud-run] revision [mikkegt-cloud-run-00001-buf] has been deployed and is serving 100 percent of traffic at https://mikkegt-cloud-run-3dcryxryhq-an.a.run.app
デプロイ完了。ターミナルに表示されたURLにアクセスしてみます。
https://mikkegt-cloud-run-3dcryxryhq-an.a.run.app
![スクリーンショット 2019-12-16 1.41.17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F44436e81-733f-1a77-990b-63cc4e8ed405.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=052773f5ae221e51d49d00263f508bea)
できた
GCPの「Cloud Run」メニューから、デプロイされたコンテナを見ることができます。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F59bc894b-6c15-0289-47e0-953c244bc65e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f9d12e8c36ba8e222bd3a1064afa8c98)
Firebase Hosting 経由で Cloud Run にアクセスする
Firebaseのドキュメントサイトに
Cloud Run を使用した動的コンテンツの配信とマイクロサービスのホスティング
とか書いてあって、なんだか凄そうですがよくわかっていません。
Firebase CLI を最新バージョンに更新する
Firebase CLIのインストール方法と使い方はこちら
https://firebase.google.com/docs/cli?hl=ja#update-cli
以下のコマンドで最新に。
$ npm install -g firebase-tools
Firebase Hosting
Firebaseドキュメントサイトより
本番環境レベルのホスティングはグローバル コンテンツ配信ネットワーク(CDN)を基盤としています。ホスティングのデフォルトでは、コンテンツが SSL 経由で配信され、お客様所有のカスタム ドメインや、プロジェクトの web.app や firebaseapp.com の無料サブドメインで使用できます。
CDN とか SSL の設定とか自分でやらんでいいという。素敵すぎます。ということで、Firebase Hosting 経由で Cloud Run にアクセスする設定にレッツチャレンジ。
Firebase でプロジェクトを作成する
Firebaseのコンソールにログインし、プロジェクトを追加します。
https://console.firebase.google.com/
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fb8b4d420-a369-53cc-ec3a-f73171460691.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=32e9f5c84a61024a052fa55cd910e619)
先ほど GCP で作成したプロジェクトを選択します。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F3f9daced-aee7-f5b8-3928-edff29f90384.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=81052b2d084878c3232e7c97a50a5f72)
[続行]をクリックします。(Firebaseは毎月UIが変わっている気がする...)
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F9c050c92-d7e4-1594-52be-6263dee637b1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0cf9888ba2b720fde69d185a0cb1a8d8)
[プランを確認]をクリック。
![スクリーンショット 2019-12-17 1.47.53.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fbbcfbf50-12d4-6c63-abe4-648950344662.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=16c7cefef811e54beaf06ea29ba090e4)
[続行]をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fd5ba8554-39f5-6d48-9939-32583b74d340.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=65b26a6581a744746d6e11cc8e4b829a)
これも[続行]
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F4e1e5eb6-3bfc-3d64-cc1b-65f55cbed91e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e44931aaf22716334c0727e0fedd3fbc)
適当に選択し、[Firebaseを追加]をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fd60b129b-12da-17da-b560-6c1b2c536a52.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8be771b64df43caf2cf1c233d308aa99)
しばし待つ。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F0577acf4-ecbc-1c86-20a1-4cc866b35f75.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=096da3bbc77af939c176a1ba1d3cfd11)
[続行]をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F1440c4d9-b70b-6e3f-3aaf-df62219a06a8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=90bc3f130c4b5babd64dc17eae667d86)
作成したプロジェクトのコンソールが表示されます。「>」をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F23f2c313-6091-9bf7-65a3-8cacc7f5fd21.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f9cdd427b83293fd6cbd737620d2d9bd)
「アプリのニックネーム」に適当な名前を入力し「このアプリのFirebase Hosting も設定します。」にチェックを入れ、[アプリを登録]をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F9a91c9f8-651f-55ab-189c-84304ac4a5a4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4916daa9845394bdabfe08c1b81406d4)
このスクリプトはコピーしなくていいです。[次へ]をクリックします。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F65dc4de8-b966-0f6a-06c1-c1cded6ff05a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=01779cbb9f3681fcbd525c5d8767d00c)
npm install -g firebase-tools
は先程やったのでスキップします。[次へ]をクリック。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fd11b4779-d6ed-2bb4-62c0-5234251ec84a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=29161ad74cd8128cdd47821080bb5c9f)
Firebase CLIを初めて触る人は、ターミナルからfirebase login
を実行して、認証します。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F2eaea089-ecee-7e8c-28da-2de9d2339136.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2a81441647f3cfa8e0084a2dd27aaae3)
firebase init
を HUGO プロジェクトのトップディレクトリで実行します。
「Hosting: Configure and deploy Firebase Hosting sites」を選択します。(選んだらスペースキーをクリックし、Enter)
$ pwd
/Users/mikke/go/src/mikkegt
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/mikke/go/src/mikkegt
? Which Firebase CLI features do you want to set up for this folder? Press Space to select feature
s, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert
selection)
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
◯ Emulators: Set up local emulators for Firebase features
「Use an existing project」を選択し、Enter。
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
先程作成したFirebaseのプロジェクトを選択し、Enter。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
greentowntokyo (GreentownTokyo)
❯ mikkegt (mikkegt)
my-react-gopher (my-react-gopher)
mycloudfirestore-go (mycloudfirestore-go)
Enter。
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? (public)
N
を選択します。
Configure as a single-page app (rewrite all urls to /index.html)? No ←ここ
File public/404.html already exists. Overwrite? No ←ここ
Skipping write of public/404.html
File public/index.html already exists. Overwrite? No ←ここ
Skipping write of public/index.html
Writing configuration info to firebase.json...
Writing project information to .firebaserc...
✔ Firebase initialization complete!
Firebase コンソールに戻ります。
firebase deploy
は、まだやらないのでスキップします。[コンソールに進む]をクリック。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fcd46d02a-5d62-440e-70c2-0804b6ac666c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=19d7afc2677b9be8d634966548053f5e)
firebase init
を実行した時に、同ディレクトリにできた firebase.json
を編集します。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2Fa87aecee-0cf9-75ca-b27f-e40acbd86e3c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2c2dc7d10710816e0a22f1d0342545c1)
hosting セクションに rewrite 構成を追加します。
変更前
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
変更変更後
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "**",
"run": {
"serviceId": "mikkegt-cloud-run",
"region": "asia-northeast1"
}
} ]
}
}
serviceId には、Cloud Run にデプロイしたコンテナのイメージ名を書きます。
region リーションを指定します。今回は Cloud Run と同じところにしてみた。
ほんとは、これだけだとFirebase Hostingを使う意味がないらしいですが..とりあえずデプロイします。
firebase deploy
を実行。
$ firebase deploy
=== Deploying to 'mikkegt'...
i deploying hosting
i hosting[mikkegt]: beginning deploy...
i hosting[mikkegt]: found 21 files in public
✔ hosting[mikkegt]: file upload complete
i hosting[mikkegt]: finalizing version...
✔ hosting[mikkegt]: version finalized
i hosting[mikkegt]: releasing new version...
✔ hosting[mikkegt]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/mikkegt/overview
Hosting URL: https://mikkegt.firebaseapp.com
ターミナルに表示されたURLにアクセスしてみましょう。
https://mikkegt.firebaseapp.com
![スクリーンショット 2019-12-19 2.03.21.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F226031%2F8adfc973-b504-2124-d880-cf0062877a75.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c580fcd68e504a20334647fb17ca07b7)
Firebase 経由で Cloud Run にデプロイした HUGO サイトにアクセスできました✨
さいごに
いつかやってみよう、がたくさんあって、Advent Calendar の締め切りのおかげで、最近試したいことがいっぺんにほぼできました。ありがとうQiita。誰かに読んでもらうかも..と思うとちゃんと調べたり何度も試したりと、曖昧にできないのでアウトプット大事だなぁと思いました。
HUGO を教えてくれた @mi-bear さんや、Cloud Run推しの Diego氏 とか Cloud Run勉強会を開催してくれた GCPUG女子会の皆さま、勉強になりました。感謝!
ここまでお読みいただきありがとうございました。
参考サイト
https://qiita.com/bake0937/items/e0914efbd9434be474a4
https://medium.com/google-cloud/how-to-run-a-static-site-on-google-cloud-run-345713ca4b40