Gridsomeで作ったサイトをせっかくなのでちゃんとホスティングしてみる、Amplify Consoleで。

f:id:Keisuke69:20200609112825p:plain

はじめに

先日、Gridsomeを試したわけですがせっかくなのでホスティングしてみようと思いついたため、サクッと試してみようと思ったらサクッとできたのでメモ。

www.keisuke69.net

ホスティングにはNetlifyあたりが鉄板かと思いつつ、ここはやはりAmplifyでしょーということでAmplify Consoleを使ってます。

なお、前回使ったAWS Lightsailをつかって立てたWordpressは削除してしまっていたので、そこは話題のShifter Headless使ってます。

www.getshifter.io

Shifter

サーバーレスなWordPressのサービスです。 StaticとHeadlessの2種類あって今回は後者のHeadlessを使います。

Free trialで7日間なら無料で使えますのでサクッとサインアップします。

前回同様、ここにはてなブログのデータをインポートしていきます。と思ったらインポーターが使えないようです。。。困ってたら、

と教えていただきました。もう一回、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を使います。

aws.amazon.com

Amplify Consoleでは任意のリポジトリと結びつけることで更新があるとビルドして公開するってのが自動でできます。今回はGithubのPublic Repositoryとして作ってるのでそれと紐付けます。

ここからはAWSのマネージメントコンソールでやっちゃいます。

f:id:Keisuke69:20200612123104p:plain f:id:Keisuke69:20200612123125p:plain f:id:Keisuke69:20200612123150p:plain

基本的にデフォルトのままで大丈夫なのですがBuild Settingsだけ少し修正します。baseDirectoryをGridsomeでビルドした成果物の出力先である/distに変更するだけです。 f:id:Keisuke69:20200612123220p:plain f:id:Keisuke69:20200612123408p:plain

設定が終わると自動的にビルドからデプロイが走るのですが今回は先の環境変数をまだ設定していないので最初の一回は失敗します。 f:id:Keisuke69:20200612123430p:plain

環境変数を設定します。 f:id:Keisuke69:20200612124155p:plain

右上のRedeploy this versionを押して再度デプロイします。 f:id:Keisuke69:20200612124411p:plain

今度は成功。 f:id:Keisuke69:20200612124511p:plain

というわけで表示されてるURLにアクセスすると無事にデプロイされてることがわかると思いますー。同じデータでやったので表示内容は前回と一緒です。 f:id:Keisuke69:20200612124839p:plain

簡単ですね。ブログ書くほうが時間かかるってくらい簡単。

ここらへんが気になる

今回、Amplify Consoleでデプロイをしてみたわけですが、こういったGitでのフローの場合にいくつか気になったのがコンテンツ更新からサイト更新の運用フロー。

静的サイトジェネレータなので新しい投稿をしたらビルドし直す必要があるんですが、それってどういうフローでやるのがベストなのか気になります。

コンテンツを更新したらローカルでビルドして/distの下だけホスティングサイトにアップするって運用が多いんですかね?コンテンツを更新する人って必ずしもエンジニアではないと思うのですがそのあたり実運用ではどうやってるのか気になりますね。

プロダクションでこの手のサイトを運用している人はこのあたりどうしてるのかな。

©Keisuke Nishitani, 2020   プライバシーポリシー