前回は手元で Headless SSR のプロジェクトを動作させて、ページが表示できるのかどうかを確認しました。今回は、各種プラットフォームに展開をする手順に関して紹介をしていきます。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5xCjoca71mkbjDmjr4IIR0%2F52780cd813f06710df059f2a629668a7%2Fdelivery23.png&w=3840&q=75)
Github にリポジトリを作成する
手元で動作させていたコードを Github に登録します。今回は手軽に Github Desktop を利用して以下の様な手順で進めていきます。git のコマンドに慣れている方は、コマンドラインのみで進めることもできます。
ローカルのリポジトリを作成
まず最初に、Github Desktop を立ち上げて File - Add Local Repository をクリックします。
![delivery01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3LhIS9ag6RLlbfDz7FcRSV%2F0313798fdb1d366349c1049f199d6dba%2Fdelivery01.png&w=3840&q=75)
対象となるディレクトリを選択します。
![delivery02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4i0ACvtrTpT3PYlQLGy5TB%2Fe354a6bbf622f4000d38d59af49b4d51%2Fdelivery02.png&w=3840&q=75)
選択をすると以下のダイアログが表示されます。Git のリポジトリがないため作成をするかどうか、という問い合わせとなります。
![delivery03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3MIFdUu4V51zIb6MnriVDZ%2Ff98332cb27ae47ebfa451acc89657a56%2Fdelivery03.png&w=1920&q=75)
作成に関しては、デフォルトのままで進めて問題ありません。
![delivery04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3Qt5lV5q7vw99V4JTLYeaU%2Fa2d1c764b8525fbc3e40cd7ca5a4ff8c%2Fdelivery04.png&w=1920&q=75)
GitHub にリポジトリを作成
完了すると、Publish your repository to GitHub が表示されます。
![delivery05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4fT0RrWZoDJoqCIYh80Xjv%2F96877a55e0793a14749acad53b481212%2Fdelivery05.png&w=3840&q=75)
Publish repository のボタンをクリックすると以下のダイアログが表示されます。
![delivery06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4jiLmKo3JOfebLMBejLxru%2Fb7b65eb60587770f893b2d95cf13db82%2Fdelivery06.png&w=3840&q=75)
API キーなどを入れているので、必ずプライベートで展開してください。クリックすると、GitHub にリポジトリの作成ができました。
![delivery07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1WA4LPMSBTDZ39GFxPCxez%2F8b348245f9666956327a68291c7f5d6a%2Fdelivery07.png&w=3840&q=75)
Heroku
Heroku は Salesforce が提供するアプリケーションプラットフォームです。開発者向けに無料で使うことができるサービスもあるため、今回はその範囲で展開していきます。
公開準備
Heroku に展開するにあたって、yarn に関しては対応をしていないため、package.json の設定を変更する必要があります。デフォルトのコードは以下の通りです。
"engines": {
"node": ">=8.1",
"npm": ">=5.6.0",
"yarn": "yarn is not supported, please use npm"
},
最後の項目を削除してください。
"engines": {
"node": ">=8.1",
"npm": ">=5.6.0"
},
コードを削除したあと、Github にリポジトリに反映させる必要があります。
私は Visual Studio Code を利用して編集をしているので、左側の Git のアイコンをクリックします。すると、package.json のファイルを変更していることがわかります。
![delivery08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3Kg6yiwu8a4fOofrZ2UY77%2F1cc785c3eb377ba429993ded579f0246%2Fdelivery08.png&w=3840&q=75)
コミットするためのメッセージを入力して、上にあるチェックマークをクリックすると、コミットされます。あとは右上にある ・・・ のアイコンをクリックして、プッシュを選択すると、GitHub に反映されます。
Heroku に展開する
Heroku でアカウントを作るなどを別途完了させていることを前提とします。ログインをすると以下の様な画面となります。
![delivery10.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6IuqeDxWQzy93nibexudqZ%2F57a6b97ba9941ea2f3db23070682bc8d%2Fdelivery10.png&w=3840&q=75)
![delivery11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7tuiLbcILsahRXas1frVJr%2Ff0ec52ad99c5e680ec2afc3552a0ed60%2Fdelivery11.png&w=3840&q=75)
アプリの名前を入れて、Create app をクリックします。ページが切り替わると、Deploy のタブが開いた形でアプリの設定画面が表示されます。
![delivery12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4To9hrkisjQPia4LxfJc4V%2F931ec77a0fbd7b94068fbc8a555788cb%2Fdelivery12.png&w=3840&q=75)
今回は GitHub のリポジトリと連携させるために、GitHub のアイコンをクリックします。連携している GitHub のリポジトリを検索する画面に切り替わります。
![delivery13.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6ChQ6cuorlsBKh8kOKDbIi%2Ffd528a1a3ebfd05bd7b20287c55ec667%2Fdelivery13.png&w=3840&q=75)
検索をして、対象となるリポジトリの右にある Connect のボタンをクリックします。
![delivery14.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6qLwGdHSV8pwKqUtdUcMgR%2F51cb47bf58588b3f2b881bea9e1c3889%2Fdelivery14.png&w=3840&q=75)
デプロイするブランチの選択、および自動で展開をするかどうかのボタンが表示されます。
![delivery15.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7dXG6kPdlSgyVQooEBtug7%2Fb691d71f92880c95dc5039e2a8c810c3%2Fdelivery15.png&w=3840&q=75)
今回は main のブランチを選択、テストなので Automatic Deploys は選択しません。ここはニーズに合わせて設定してください。最後に、一番下にあるボタン Deploy Branch のボタンをクリックして展開を開始します。
![delivery16.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2EwNxDGXqoQ9ca1sdgnQDN%2Fde5b8e8f159d3218dcb28c5000ddc7aa%2Fdelivery16.png&w=3840&q=75)
ログの最後には URL が表示されます。
![delivery17.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F41z9lSPwXX8a2SGiX3CFt0%2F263fa1476ada2c3b50a8deddb7b33d62%2Fdelivery17.png&w=3840&q=75)
URL にアクセスすると、デリバリーサーバーが動作していることがわかります。
![delivery18.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F63sMGLTLI9ydYJYsL8Hvkd%2F443a4c4a33b2322064b9f43f88d81247%2Fdelivery18.png&w=3840&q=75)
Azure Web App
続いて、Azure Web App に展開する手順を紹介します。
Web アプリの作成
Azure の管理ポータルから、Web アプリを作成します。
![delivery19.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2aZr0oJm70FXaZnG2aQ2W0%2F287a05a57d2d48ddf3ccfb1fbdaa7620%2Fdelivery19.png&w=3840&q=75)
追加するリソースグループなどは、既存のもの、必要に応じて新規作成するなどして準備してください。ここから紹介するのは以下の項目となります。
![delivery20.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F71rAArAfWGFlFUOCOiPAPx%2Fb47b860170420f2e26400a39f0258156%2Fdelivery20.png&w=3840&q=75)
項目のサンプルは以下の通り。
項目 | 概要 | 参考 |
---|---|---|
名前 | Web アプリ名を入力 | react-app-cd |
公開 | コードを展開して動かすためコードを選択 | コード |
ランタイム スタック | Web アプリのランタイムの選択 | Node 14 LTS |
オペレーティングシステム | OS を選択できます | Linux |
地域 | データセンターを選択 | Japan East |
入力済みの画面は以下の通りです。
![delivery21.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F38xJqs597TGzhegeILGXoB%2Fa0078b8729edd6754fb1169b2bb1700b%2Fdelivery21.png&w=3840&q=75)
続いて、画面の下にある 次:デプロイ をクリックします。画面は以下の様に切り替わります。
![delivery22.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4M2M8MsW2EledN6IBjk7Hb%2F869c1fb88ebac95461b1cc627de965dd%2Fdelivery22.png&w=3840&q=75)
有効化、を選択すると再度画面が切り替わります。GitHub のアカウントと連携をし、必要な項目を選択してください。
![delivery23.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5xCjoca71mkbjDmjr4IIR0%2F52780cd813f06710df059f2a629668a7%2Fdelivery23.png&w=3840&q=75)
入力が完了したあと、確認および作成 をクリックし、作成ボタンを押してリソースの作成となります。
![delivery24.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7f5QWgweYsv2spM6lSU0cP%2Fc11ce1039ddcc6fb230900e9972260d5%2Fdelivery24.png&w=3840&q=75)
動作確認
作成が完了したあと、App Service の画面に切り替えます。
![delivery25.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4HpTrQQfljcLU1GN3LKKqU%2F1fc199bb2d03d95a4629282f6813c520%2Fdelivery25.png&w=3840&q=75)
デプロイセンターに切り替えて、ログで展開を成功していることを確認してください。
![delivery26.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FvVchbqOSyq9ctHv22aqOc%2F981b0b41e28f661deef027922be54075%2Fdelivery26.png&w=3840&q=75)
ビルドの成功が完了したところで、URL にアクセスをしてください。以下の様にページが表示されます。
![delivery27.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F70LZeQO9rnTHMCPL6KjsZl%2F738d1536d17e332659390a781376e0bf%2Fdelivery27.png&w=3840&q=75)
まとめ
今回は2つのプラットフォーム、Heroku と Azure Web アプリに対して GitHub のリポジトリを連携してサイトを立ち上げるところまで紹介をしました。Azure Web アプリの場合はブランチを分けて展開するとかも可能ですので、main の前に staging に展開をして確認をする、ということも可能です。
また heroku および Azure Web アプリどちらもオートスケールのための機能も提供されていますので、クラウドを活用したサイト運用として、JSS も1つの選択しになります。
- Headless SSR - Part.1
- Headless SSR - Part.2
- Headless SSR - Part.3