React の準備と Amplify デプロイ
データ連携するデザインパーツが Amplify Studio で出来上がったので Cloud9 の Amplify 環境に共有しつつ、それに合わせてソースコードを調整して、もろもろサイトの公開します。
さきほどの Figma のコンポーネントを React に準備して Amplify デプロイを行います。
こちらの手順を進めていきます。
Cloud9 で作業
AWS コンソールの上部から Cloud9 を検索して呼び出しましょう。
一覧から、今回の Cloud9 を選択して Open IDE ボタンをクリックします。
今回の Cloud9 を開きました。先ほど作業していたものがちゃんとあるはずです。
ターミナルでフォルダの移動
Cloud9 に入った時にターミナルでの狙っているフォルダが作業フォルダになっていない場合は移動します。
cd amplify-homes-handson-sample-202208
ターミナルでこちらのコマンドを入力して、React や Amplify の設定した対象のフォルダへ移動します。
（対応してもらう前に、状況聞いてみる）
あらためて、作業フォルダが ~/environment/amplify-homes-handson-sample-202208 担っているか確認して進めましょう。違う場所の場合、次の amplify pull でエラーやアラートが出ます。
amplify pull コマンドをクリップボードにコピー
NewHomes コンポーネントを Cloud9 に準備した React ソースコードに割り当てる手順が書いてあるので 1. に書いてあるコマンドを、右側にあるコピーボタンでコピーします。
コピーしたあと、Cloud9 にターミナルに貼り付けてコマンド実行をします。
これで、NewHomes だけでなく NavBar ・ MarketingFooter が使えるようになります。
src/App.jsの修正
src/App.js を変更します。
import './App.css';
import { NewHomes, NavBar, MarketingFooter } from './ui-components'
function App() {
return (
<div className="App">
<NavBar />
<NewHomes />
<MarketingFooter />
</div>
);
}
export default App;
こちらのソースコードに差し替えます。
具体的には、元のソースから以下を行っています。
import { NewHomes, NavBar, MarketingFooter } from './ui-components'という今回使うコンポーネントが呼び出されたり<NavBar /><NewHomes /><MarketingFooter />が表示部分 App に配置されています。
Amplify に publish
この変更を、いよいよ Amplify のホストに反映してみましょう。
amplify publish
こちらのコマンドで Amplify に反映します。
Do you still want to publish the frontend?
は、Yesで進みます。
(node:7600) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/ec2-user/environment/amplify-homes-handson-sample-202208/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
Creating an optimized production build...
と途中で止まっているように見えるかもですが、待っていれば OK です。
✔ Zipping artifacts completed.
✔ Deployment complete!
https://**********.*****************.amplifyapp.com
と出れば反映成功です。
表示確認
ターミナルでデプロイされた URL を Open で開きます。
このように表示が確認できるはずです！