背景
今年の初めに法人を作ったので、楽天銀行で法人口座を開設しようと手続きを進めてみたら、自社Webサイトがあると提出書類が減るとのことだったので簡易にサイトを構築してみました。
楽天銀行 口座開設に必要な書類
最近PO/PM業務が多かったので久しぶりの技術です。
事前の用意
- ドメイン（AWS Route53で取得も可）
- AWSアカウント
- githubアカウント
私はmuumuuドメインでドメインを取得、静的サイトはReactで作りました。
構築手順
ほぼここに書かれた内容そのままですが、手順を追って説明します。
静的サイトの構築
まずはローカル環境で静的サイト（Reactアプリ）を作ります。Reactって何？って方はこちらを参照ください。
npx create-react-app ｍysite
cd mysite
yarn start
githubリポジトリの作成
githubで新しくリポジトリを作成します。
githubへ静的サイトをpush
Reactアプリのディレクトリで以下のコマンドを打ちます。環境によって6行目の文字列は異なるのでgithubでリポジトリ作成時に表示されたコマンドをそのまま打ちましょう。
echo "# mysite" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:account/mysite.git
git push -u origin main
githubのデフォルトのブランチがmasterからmainに変わってました。
AWS Amplifyからgithubに接続
Amplifyから、githubで作成したリポジトリへ接続して、Reactアプリをデプロイしてあげます。
Amplifyにアクセスして、いくつかの質問に答えていくだけで設定が終わります。
ここまでくれば、Amplifyのサブドメイン上で、作成したReactアプリがインターネット公開されます。とても簡単ですね。
以前、herokuでもReactアプリをデプロイしたことがありますが、それと比べるととても簡単でした。
ドメイン設定
取得済みのドメインでサイトにアクセスできるようにします。
Route 53のここからホストゾーンの作成をします。
そうすると、ネームサーバー情報が表示されるので、これをドメイン取得サイト（私の場合はmuumuu）に設定します。
ネームサーバー設定の以下の部分にRoute 53で表示されたネームサーバーを入力します。
あとは、Amplifyのドメイン管理からドメインを割り当てます。
設定画面を取り忘れましたが、設定が終わると以下のような画面になります。
以上で作業は完了です。
補足
一部画像が表示されない事象が発生したので調べたら、拡張子をjpegとしているのがだめだったようで。
以下の”書き換えて、リダイレクト”（翻訳が、、、）の設定を書き換えたら表示されるようになりました。
もともとjpgしかなかったところjpegを追加してます。
所感
１-２年技術から離れてから戻ってくると、その進化の速さに驚きます。
静的サイトくらいであればサーバなんて立てる必要もないし、ApacheやらNginxの設定もいらないんですね。。。