Zenn
🗒️

エンジニアなら自分でブログを作れ！①導入編

2022/09/27に公開
5件
Docker
Firebase
GitHub
Next.js
ブログ
tech

初めに

「SOFT SKILLS ソフトウェア開発者の人生マニュアル」という本を読みました。

この本ではエンジニアはセルフブランディングのためにブログを持つべきという主張がされていて、私もある程度共感しました。

一方で、費用対効果を考えてWordPressで構築せよということも書かれており、その点は疑問を感じました。
せっかくエンジニアという職についているので自分で作った方が良いんじゃないか？と。

WEBフロントエンドのエンジニアは自分の技術の見本市にすることができますし、それ以外のエンジニアに関してもフロントエンドの技術が一定以上あることを主張できます。これを考えれば、自分で作成することがセルフブランディングに繋がることは言うまでもないはずです。

しかし自分でブログを作るのは結構手間がかかります。ブログとしての機能やデザイン、ホスティング先等考えることが多いです。

そこで以下のような内容を記事にして公開し、エンジニアのみなさんが自分好みのブログを少ない手間で実装できるようにしようと思いました。

  • ブログのテンプレをいい感じにデプロイする。
  • テンプレに足りない機能を実装してみる。
  • デザインを変更してみる。

この記事ではその第一弾として、テンプレをFirebase HostingにGithub Actions経由でデプロイするまでを扱います。

使用技術、サービス

使用技術、サービスとしては以下の通りです。

種別 技術
コード管理 Github
CI/CD Github Actions
開発環境 Docker
ホスティング Firebase Hosting
ブログ機能 Next.js (SSG)
デザイン Tailwind CSS

選定理由は色々ありますが、

  • 無料であること
  • 商用利用できること

がポイントになっています。例えばホスティング先の候補としてはVercelもありますが、無料では商用利用ができなかったりします。

商用利用を絶対にしないという方はVercelでも良いかもしれませんが、できるに越したことはないですし、特にVercelにメリットを感じなかったです。

その他説明事項

筆者は Mac Book Air (M1) を使っています。

この記事の内容もMacでしか動作確認はしていません。

ただし、ローカルPCにはDockerしか入れないので、WindowsのWSL2でも同様に動かせると思っています。

また、この記事のコードはGithubで公開しています。参考にしてください。

https://github.com/miketako3/blog-example

事前準備

Githubでリポジトリ作成

最初にブログのコードを入れるリポジトリを作成しましょう。

https://github.com/new

こちらで好きな名前で作成してください。 ここではblog-exampleとしています。

以降blog-exampleという文字列が出てきた際には自分でつけた名前に置き換えてください。

publicでもprivateでも大丈夫です。

Firebaseでプロジェクト作成

https://qiita.com/shtwangy/items/00229a489b59213700d8

こちらの記事に従い、2のリソースロケーションの設定まで行いましょう。

プロジェクト名はわかりやすさのためにGithubのリポジトリ名と同じにしておきましょう。


Dockerのインストール

世は令和なので開発環境はDockerで構築したいですよね？

https://docs.docker.com/engine/install/

こちらに従いDockerをインストールしましょう。

ローカル環境構築

ブログのテンプレとしてNext.jsの
blog-starter
を使用します。
(公式のデモページ)

まずはローカルで立ち上げられるようになりましょう。

テンプレのダウンロード

Node.jsのDockerイメージをpullします。

$ docker pull node

好きなディレクトリに移動しましょう。その直下にブログ開発用のディレクトリを作成します。
(Githubのリポジトリ名がblog-exampleではない場合は、blog-exampleという文字列をリポジトリ名に書き換えて実行しましょう)
以降そのディレクトリで作業します。

$ docker run --rm -it -v $PWD:/home/app -w /home/app node yarn create next-app --example blog-starter blog-example
$ cd blog-example

テンプレの実行

これでテンプレの準備ができました！実行してみましょう。

$ docker run --rm -it -v $PWD:/home/app -w /home/app -p 3000:3000 node yarn dev

ブラウザで

http://localhost:3000

にアクセスしてみましょう。以下のデモと同じページが表示されていれば問題ありません。

https://next-blog-starter.vercel.app/

Docker環境の整備

ここでローカル環境の構築を終わっても良いのですが、立ち上げる際にオプションモリモリのコマンドを入力するのは苦痛ですよね？

そこでDocker Composeを使ってもう少し楽にしましょう。

必要なファイルを作成します。

https://github.com/miketako3/blog-example/commit/8132cfa8c24c4a3faa6da1dd96d2b04db65c700d

$ touch Dockerfile
$ touch docker-compose.yml

ファイルを開いてそれぞれ以下のような内容にしましょう。(blog-exampleという文字列は同様に置き換えましょう)

https://github.com/miketako3/blog-example/blob/8132cfa8c24c4a3faa6da1dd96d2b04db65c700d/Dockerfile

https://github.com/miketako3/blog-example/blob/8132cfa8c24c4a3faa6da1dd96d2b04db65c700d/docker-compose.yml

その後ビルドします。(Dockerfileが更新されるたびに必要です。)

$ docker-compose build --no-cache

すると、以下を実行するだけで立ち上がるようになります。

$ docker-compose up

再びブラウザで

http://localhost:3000

を確認してみましょう。

おめでとうございます！これでローカルの開発環境は整いました！

Firebase Hostingへの手動デプロイ

事前準備

package.json、Dockerfile、docker-compose.ymlをそれぞれ以下のように修正しましょう。

https://github.com/miketako3/blog-example/commit/74e0d0e7b05f0f5fc54329090df3c187f6fd6c58

package.json

SSGでデプロイするため、buildコマンドを変更しましょう。

- "build": "next build",
+ "build": "next build && next export",

Dockerfile

FirebaseのCLIをインストールしておきましょう。

FROM node

+ RUN yarn global add firebase-tools

docker-compose.yml

FirebaseのCLIでは9005番ポートを使用するため、開けておきましょう。

ports:
  - "3000:3000"
+   - "9005:9005"

そしてコンテナをバックグラウンドで立ち上げます。

$ docker-compose build --no-cache
$ docker-compose up -d

コンテナ内に入る

Firebaseの設定は一連の流れで行う必要があるので、Dockerコンテナ内で作業します。

docker-compose exec app bash

これでコンテナ内に入れます。

Firebaseの設定からデプロイまで

コンテナ内で4つのコマンドを順番に実行します。

ビルド

$ yarn build

これによりoutディレクトリに成果物が生成されます。

Firebaseログイン

$ firebase login

これを実行するとまず使用状況やエラーレポートを収集して良いかを聞かれます。

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting
information?

これはYes/Noどちらでも良いです。

回答後、URLが表示されるのでコピペしてブラウザで開きましょう。
GoogleのログインとFirebase CLIの許可を要求されるので、ログインして許可してください。

✔ Success! Logged in as XXXXXXX@gmail.com

と表示されればOKです。

Firebase設定

$ firebase init

これを実行するとFirebaseの初期設定が始まります。

いくつか選択肢が出てくるので、次のように選択しましょう。

? Which Firebase features do you want to set up for this directory? Press Space to select
features, then Enter to confirm your choices.

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
(スペースキーで選択、エンターで決定です。この選択肢だけ選択します。)

? Please select an option

Use an existing project

? Select a default Firebase project for this directory

最初に作ったFirebaseプロジェクトの名前を選択しましょう。この記事ではblog-example-XXXXXを選択します。

? What do you want to use as your public directory?

out

? Configure as a single-page app (rewrite all urls to /index.html)?

No

? Set up automatic builds and deploys with GitHub?

Yes

? File out/404.html already exists. Overwrite?

No

? File out/index.html already exists. Overwrite?

No

Visit this URL on this device to log in
~URL~

URLをまたコピペしてブラウザで開きましょう。githubの認証を要求されるので許可します。

? For which GitHub repository would you like to set up a GitHub workflow?

${自分のGithubアカウント名}/${リポジトリ名}
例えば自分の場合は miketako3/blog-example になります。

? Set up the workflow to run a build script before every deploy?

Yes

? What script should be run before every deploy?

yarn install --immutable --immutable-cache --check-cache && yarn build

Set up automatic deployment to your site's live channel when a PR is merged?

Yes

? What is the name of the GitHub branch associated with your site's live channel?

master (もしメインブランチの名前がmainであればmainにしましょう)

✔ Firebase initialization complete!

これが出れば完了です！

Firebaseデプロイ

$ firebase deploy

✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/blog-example-XXXXX/overview
Hosting URL: https://blog-example-XXXXX.web.app

実行してこのような表示が出ればデプロイ成功です！

Hosting URLの部分をコピペしてブラウザで開くと、テンプレのブログが表示されるはずです。

Github Actions経由でのデプロイ

毎回手でデプロイするのは手間なので、masterブランチへ変更をコミットしたら自動的にデプロイされてほしいですよね？

実は firebase init コマンドを実行した段階でその設定が完了しています。
(Firebase CLIの便利なところです。)

components/intro.tsxを変更して、今までの変更と合わせてコミットしてGithubにpushしましょう。

intro.tsx

<h1 className="text-5xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
-  Blog.
+  Hello World!
</h1>


$ git add -A
$ git commit -m "Hello World"
$ git remote add origin git@XXXXXXXXX
$ git push -u origin master

これでGithub Actionsが動き出すはずです。

https://github.com/${自分のアカウント名}/${リポジトリ名}/actions

にアクセスして確認してみましょう。workflowが動いていれば終了です。完了するまで待ってからデプロイしたブログのURLを再度確認しましょう。

https://blog-example-XXXXX.web.app

ヘッダの部分がHello World!になっていれば終了です！お疲れ様でした！

まとめ

この記事では以下について解説しました。

  • 独自ブログを作る理由
  • 独自ブログの技術選定
  • テンプレのローカル環境構築
  • テンプレのCI/CD構築

次回はテンプレのコードを理解することや、カスタマイズする方針等についてお伝えできればと思っています。

最後に、私の投稿はZenn以外の投稿もまとめて以下ブログで取得できますので、良ければ見てみてください。

https://blog.miketako.xyz

追記

次回

https://zenn.dev/miketako3/articles/bfdc1b09ba8ed3

Discussion

toppema0144toppema0144

初めまして。ここ最近Reactに触れてみてサイトを作成してみたいと思いこのサイトにたどり着きました。

dockerなどもあまり触れたことがなくとても勉強になっています。

ただ、yarn buildのところで少々躓いています。
Error: Image Optimization using Next.js' default loader is not compatible with next export.
というエラーが出て自分なりに調べてみると、NextjsのバージョンとImagタグが絡んでいるようなのですが、今一つ解決方法がわからない状態です。

もし、お手すきの際ありましたら回答していただけると幸いです。

みけたこみけたこ

確認遅くなりました。
記事の方は以下の部分に追記しましたのでご確認お願いします。

Firebaseの設定からデプロイまで/ビルド

おそらくImageタグがNext.jsのSSGに対応しておらず、imgタグへの変換が必要である、というのが理由です。

私が作った方のリポジトリでは直しているのですが、記事への反映を忘れていたようです…すいません。

また何かありましたらお気軽にコメントいただければと思います。すぐの返信は難しいかもしれませんが確認はしております。

haruharu

記事とてもわかりやすかったです！ありがとうございます。

Firebase Hostingへの手動デプロイ＞事前準備＞package.json（"build": "next build && next export"）のところですが、現在はnext exportコマンドは廃止されたようで、代わりにnext.config.jsを作って以下のように記載するといいみたいです。

const nextConfig = {
  output: 'export',
  distDir: 'out',
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

みけたこみけたこ

ありがとうございます！！！！この記事の内容をやろうとしている方々にとても良い情報だと思います！

Next.js等の進化速度が速いのもあってだいぶこの一連の記事は陳腐化してしまっている状態です…
時期を見て最新化します！