エンジニアなら自分でブログを作れ！①導入編
Blueskyのフォローお願いします！
初めに
「SOFT SKILLS ソフトウェア開発者の人生マニュアル」という本を読みました。
この本ではエンジニアはセルフブランディングのためにブログを持つべきという主張がされていて、私もある程度共感しました。
一方で、費用対効果を考えてWordPressで構築せよということも書かれており、その点は疑問を感じました。
せっかくエンジニアという職についているので自分で作った方が良いんじゃないか？と。
WEBフロントエンドのエンジニアは自分の技術の見本市にすることができますし、それ以外のエンジニアに関してもフロントエンドの技術が一定以上あることを主張できます。これを考えれば、自分で作成することがセルフブランディングに繋がることは言うまでもないはずです。
しかし自分でブログを作るのは結構手間がかかります。ブログとしての機能やデザイン、ホスティング先等考えることが多いです。
そこで以下のような内容を記事にして公開し、エンジニアのみなさんが自分好みのブログを少ない手間で実装できるようにしようと思いました。
- ブログのテンプレをいい感じにデプロイする。
- テンプレに足りない機能を実装してみる。
- デザインを変更してみる。
この記事ではその第一弾として、テンプレをFirebase HostingにGithub Actions経由でデプロイするまでを扱います。
宣伝
「Niche Love」というサービスを作りました。
まだ全然ユーザーがいないのですが、良ければ投稿してみてください！
使用技術、サービス
使用技術、サービスとしては以下の通りです。
| 種別 | 技術 |
|---|---|
| コード管理 | 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で公開しています。参考にしてください。
事前準備
Githubでリポジトリ作成
最初にブログのコードを入れるリポジトリを作成しましょう。
こちらで好きな名前で作成してください。 ここではblog-exampleとしています。
以降blog-exampleという文字列が出てきた際には自分でつけた名前に置き換えてください。
publicでもprivateでも大丈夫です。
Firebaseでプロジェクト作成
こちらの記事に従い、2のリソースロケーションの設定まで行いましょう。
プロジェクト名はわかりやすさのためにGithubのリポジトリ名と同じにしておきましょう。
Dockerのインストール
世は令和なので開発環境はDockerで構築したいですよね？
こちらに従い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
ブラウザで
にアクセスしてみましょう。以下のデモと同じページが表示されていれば問題ありません。
Docker環境の整備
ここでローカル環境の構築を終わっても良いのですが、立ち上げる際にオプションモリモリのコマンドを入力するのは苦痛ですよね？
そこでDocker Composeを使ってもう少し楽にしましょう。
必要なファイルを作成します。
$ touch Dockerfile
$ touch docker-compose.yml
ファイルを開いてそれぞれ以下のような内容にしましょう。(blog-exampleという文字列は同様に置き換えましょう)
その後ビルドします。(Dockerfileが更新されるたびに必要です。)
$ docker-compose build --no-cache
すると、以下を実行するだけで立ち上がるようになります。
$ docker-compose up
再びブラウザで
を確認してみましょう。
おめでとうございます！これでローカルの開発環境は整いました！
Firebase Hostingへの手動デプロイ
事前準備
package.json、Dockerfile、docker-compose.ymlをそれぞれ以下のように修正しましょう。
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以外の投稿もまとめて以下ブログで取得できますので、良ければ見てみてください。
追記
次回
Discussion
Firebaseにデプロイできない方はもしかしたら以下が原因かもしれません。
初めまして。ここ最近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タグへの変換が必要である、というのが理由です。
私が作った方のリポジトリでは直しているのですが、記事への反映を忘れていたようです…すいません。
また何かありましたらお気軽にコメントいただければと思います。すぐの返信は難しいかもしれませんが確認はしております。
記事とてもわかりやすかったです！ありがとうございます。
Firebase Hostingへの手動デプロイ＞事前準備＞package.json（"build": "next build && next export"）のところですが、現在はnext exportコマンドは廃止されたようで、代わりにnext.config.jsを作って以下のように記載するといいみたいです。
ありがとうございます！！！！この記事の内容をやろうとしている方々にとても良い情報だと思います！
Next.js等の進化速度が速いのもあってだいぶこの一連の記事は陳腐化してしまっている状態です…
時期を見て最新化します！