AWS で React アプリを作成して公開する方法

概要

この記事は、下のサイトを参考にやってみて、つまづいた箇所の説明を詳しく書いたものです。
＊ AWSに慣れるため、開発環境もEC2に作成するという無駄なことをしてますが、ご容赦ください。

環境

事前に準備した以下の環境を用いています。

• AWS EC2
  使用しているOSはAmazon Linuxです。OpenSSH がプリインストールされています。
  gitをインストールしておきます

sudo yum install -y git

gitHub リポジトリの作成

1. gitHub でリポジトリを作成

2. EC2インスタンスに作成したリポジトリをクローン
   ＊ この記事では、gitHub と SSHを介してやり取りするので、SSH用のアドレスでリポジトリをクローンしておきます

git clone [e-mail]:{ユーザー名}/{リポジトリ名}.git

EC2 から gitHub への SSH 接続設定

参考サイト

EC2インスタンスで Key Pair を作成

ssh-keygen -t rsa -f ~/.ssh/id_{KeyPair名}

KeyPair名は任意に設定してください
作成された Key Pair は ~/.ssh に保存されます

SSHへの秘密鍵の登録

SSH を起動し、作成した Key Pair の秘密鍵を登録します

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_{KeyPair名}

上記を .bashrc に記載しておくと、シェル起動時に実行されます

gitHub リポジトリへの公開鍵の登録

• 公開鍵の内容を表示してコピーします

cat ~/.ssh/id_{KeyPair名}.pub

• gitHubのリポジトリのページを開き、以下を行います

1. リポジトリのページの上部のメニューから「Settings」 を押します
2. 左メニューにある「Deploy Keys」を押します
3. 上部にある「add deploy key」を押します
4. 「Deploy keys / Add new」ページで、先ほどコピーした秘密鍵の中身を「Key」欄にペーストし、「Add Key」ボタンを押して登録します

Reactアプリの作成とgitHubへのpush

• Reactアプリを作成

create-react-app <アプリ名>

<アプリ名>フォルダが作成され、Reactアプリの作成準備ができます。git の初期化も行われ、最初のコミットがされます。

• ReactアプリをgitHub にpush

cd <アプリ名>
git remote add origin [e-mail]:<ユーザー名>/<リポジトリ名>.git
git branch -M main
git push -u origin main

AWS Amplify でのデプロイ

これは下記サイトを参照してすんなりとできました。

まとめ

gitHub への SSH接続ですこしつまづきましたが、AWSを使うとアプリの公開やCDが簡単にできることが分かりました。