Next.jsで地政学メディアの3D開発をしているshusakuinfinityです。
本記事では無料のHeadless CMSであるStrapiを一旦は無料で、かつ将来的にも楽しみな方法でホスティングをする方法を明記します。
参考にした記事はこちらです。
背景
2022年8月末に発表されたHerokuの無料版停止につき、Strapiを無料でホスティングすることができなくなりました。
自分のプロダクトがまだローカル環境下での開発につき問題はなかったのですが、将来的に360度写真をCMSに入れて3Dアプリの方で呼び出そうと思っていたので悩みのタネになり始めていました。
その後ググりまくった結果、StrapiのフォーラムにてRailwayがオススメされまくっていることがわかり、ステマだったら怖いな、、、と思いつつ試してみました。
結果的に「わかんないことはまだまだあれど満足！」みたいなことになったので、その道筋を記しておこうと思った次第です。
（また、本記事のRailwayへのリンクには自分の紹介コードが入っておりますので、もしお気に障らないようであれば、お得だと思いますので使ってみて下さい）
Railwayは信頼できるのか否か
結論から言えば、信頼できる方だと思います。理由はテック系投資家が多数入っており、かつVercelのCEOも投資していたからです。
というか、本音を言えばこれかRenderしか選択肢が無さそうで、こっちのほうが使いやすくて料金的にも納得感があったので、信頼できる理由を探していた結果、Investorsにて個人的には落ち着いた、という感じです。
後からVercelとの連携も見つけて、Next.js使いとしてはこれから更に楽しみ！と思った次第です。
STEP.1 アカウント開設
前置きが長くなりました、では始めます。
まず、Railway公式サイトのログインボタンを押して、Githubを選びます。（この後、たくさんのPermissionを求められるので心のご準備を）
STEP.2 Strapiの自動セットアップを選ぶ
New Projectの検索バーにStra...と打ち始めればStrapiが見つかります。
STEP.3 レポジトリの設定
レポは自分のGithubに自動生成されますので、わかり易い名前をつければ大丈夫かと。
また、環境変数については少々混み合いますので次のSTEPにて詳細を。
STEP.4 上段4つ（Cloudinary以外）の環境変数の設定
適当に強めな文字列を設定します。こちらのサイトがおすすめ
STEP.5 Cloudinaryの環境変数の設定（のためにCloudinaryへ）
このサービスは、メディアファイルの保存先として自動セットアップされるものです。写真等のアップロード先も無料というのは最高。
Cloudinaryのサイトにアクセスし、こちらもアカウントを開設しましょう。
STEP.6 Cloudinaryアクセス後のトップページから環境変数をコピペ
Name, Key, Secretの3つを順番にコピペします。
STEP.7 デプロイしてアクセスする
Deployされるとリンクが発行されるので、クリックしたらこのページが無事見えているはずです。
ここでは何もできないので、/adminをURLに追加して、Adminパネルへ行きましょう。そうすれば、Strapiをローカル環境で動かしていたときのようにSuper Adminの設定から始まり、無事ホスティングされているStrapiのAdminパネルへ到達するはずです。
STEP.8 Strapiを一旦閉じて、package.jsonを編集
初期設定が開発モードになっていないのでコレクションの追加ができません。なので、Github上で問題ないので、package.jsonを一行編集しましょう。
{
"name": "strapi",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi develop", // <<----- ここ！！！
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"@strapi/plugin-i18n": "4.1.9"
"@strapi/plugin-users-permissions": "4.1.9"
"@strapi/provider-upload-cloudinary": "4.1.9"
"@strapi/strapi": "4.1.9"
"pg": "8.7.3"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "35d7a084-3088-4d0b-869e-f503693ee8e5"
},
"engines": {
"node": ">=12.x.x <=16.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}
STEP.9 リビルドされるので再度Adminパネルへ。【完了】
晴れて新しくコンテンツタイプビルダーが使えるようになりました！あとはローカル環境でやっていたように動くはずです。Media Libraryに上げた写真はCloudinaryの方でも確認ができますので、試してみて下さい。
個人的な感想、今後等
正直、ノーコードと言ってもいいぐらいにスムーズにセットアップができて最初は驚きました。
その後、使用時間が刻一刻と減っていくUIを見つつ、若干ビビりながらも「まあ有料になっても数ドルを使った分だけと安いか」と思いつつ、まだクレカの登録も無いので一旦は安心しています。
また、先にも触れていましたが、RailwayはVercel社との関係があり、連携をしたらPreviewモードというものが使えそうな様子がありました。これはぜひ試したいです。
後は、バージョンアップしたら作ったコンテンツが消えた、、、というのは自分の知識と経験の無さかと思っています。詳しい人が居たら、ぜひ情報共有いただけるととっても嬉しい、、、なんていうのも恥を偲んで、今回は誰かのためになれば！と思って記事を作成させていただいた次第です。
このワクワクするサービス、気が向いたらぜひ是非試してみて下さい！では！