はじめに
先日、Gridsomeを試したわけですがせっかくなのでホスティングしてみようと思いついたため、サクッと試してみようと思ったらサクッとできたのでメモ。
ホスティングにはNetlifyあたりが鉄板かと思いつつ、ここはやはりAmplifyでしょーということでAmplify Consoleを使ってます。
なお、前回使ったAWS Lightsailをつかって立てたWordpressは削除してしまっていたので、そこは話題のShifter Headless使ってます。
Shifter
サーバーレスなWordPressのサービスです。 StaticとHeadlessの2種類あって今回は後者のHeadlessを使います。
Free trialで7日間なら無料で使えますのでサクッとサインアップします。
前回同様、ここにはてなブログのデータをインポートしていきます。と思ったらインポーターが使えないようです。。。困ってたら、
こんな感じで作業するのが安全かと思います:
— Hiromi Ito💫🌎Go to Jamstack@Shifter Headless (@hiro_baila) 2020年6月11日
1. はてなからデータをエクスポート (MT形式)
2. ローカルのWordPress 環境にインポート (VCCWでもwockerでもなんでもいい)
3. ローカルのWordPress からAll-in-One WP Migration でエクスポート
4. Headless へAll-in-One WP Migration でインポート
と教えていただきました。もう一回、WordPress立てる必要あるのかーと思ってたらShifter StaticでもOKとのことだったのでそっちで。
手順は前回と同様の手順でShifter staticに一度インポートして、今度はWordPressの形式でエクスポート、それをHeadless側でインポートします。ちなみにShifter Staticって静的サイトジェネレータなのでWordPressの管理画面を触りたい場合はインスタンスを作業時のみ明示的に立ち上げる必要があります。
Shifter HeadlessへのインポートはAll-in-One WP Migrationというプラグインを有効にしておけばできます。
ところで、Shifterって初めて利用したんですが、Dashboardの各種値がクリックされると勝手にコピーされるのとても使い勝手がいいですね。また、初見で何も見ずにセットアップ可能なのも簡単でよかったです。
Gridsome
Gridsome側は基本的には前回のやつのURLをShifter Headlessで用意されたURLに変更するだけです。ただ、今回はPublic Repositoryに置くのでgridsome.config.jsにベタ書きするのではなく環境変数BASE_URLから取得する方法に変えています。もちろん環境変数は自分でセットする必要ありますよ。これはこのあとのAmplify Consoleでも必要です。
{ use: "@gridsome/source-wordpress", options: { baseUrl: process.env.BASE_URL, // required typeName: "blog", apiBase: 'wp-json', perPage: 10, concurrent: 1, }, },
試しにgridsome developでしたところ特に問題もなくさくっと動きました。
Amplify Console
静的サイトのホスティングに今回はAmplify Consoleを使います。
Amplify Consoleでは任意のリポジトリと結びつけることで更新があるとビルドして公開するってのが自動でできます。今回はGithubのPublic Repositoryとして作ってるのでそれと紐付けます。
ここからはAWSのマネージメントコンソールでやっちゃいます。
基本的にデフォルトのままで大丈夫なのですがBuild Settingsだけ少し修正します。baseDirectoryをGridsomeでビルドした成果物の出力先である/distに変更するだけです。
設定が終わると自動的にビルドからデプロイが走るのですが今回は先の環境変数をまだ設定していないので最初の一回は失敗します。
環境変数を設定します。
右上のRedeploy this versionを押して再度デプロイします。
今度は成功。
というわけで表示されてるURLにアクセスすると無事にデプロイされてることがわかると思いますー。同じデータでやったので表示内容は前回と一緒です。
簡単ですね。ブログ書くほうが時間かかるってくらい簡単。
ここらへんが気になる
今回、Amplify Consoleでデプロイをしてみたわけですが、こういったGitでのフローの場合にいくつか気になったのがコンテンツ更新からサイト更新の運用フロー。
静的サイトジェネレータなので新しい投稿をしたらビルドし直す必要があるんですが、それってどういうフローでやるのがベストなのか気になります。
コンテンツを更新したらローカルでビルドして/distの下だけホスティングサイトにアップするって運用が多いんですかね？コンテンツを更新する人って必ずしもエンジニアではないと思うのですがそのあたり実運用ではどうやってるのか気になりますね。
プロダクションでこの手のサイトを運用している人はこのあたりどうしてるのかな。
