이번에는 React와 Rails를 사용하여 SPA를 만들 때 하나의 EC2 인스턴스에 배포하는 방법을 잊어 버렸다.

프론트 측을 Amplify나 netlify로 배포하려고 생각하고 있었습니다만, Rails의 API측을 https화하지 않으면 리퀘스트를 받아들여 주지 않았기 때문에, EC2에 양쪽 모두 부딪히는 버릇이라고 하는 수법이 됩니다.

개요

전제로서, 이번은 프론트측에 대해 기술하기 때문에, RailsAPI측의 방법은 나중에 기술합니다.

EC2의 인바운드 규칙을 편집합니다.

먼저 EC2 보안 그룹에서 인바운드를 이미지처럼 편집해 보겠습니다.


간략한 설명으로서 API측의 포트로서 3000번을 설정하고 있습니다.
또한 IPV4와 IPV6의 모든 요청에 ​​대응하기 위해 ::/0와 0.0.0.0/0는 2개씩 설정되어 있습니다.

EC2 인스턴스에 ssh로 연결하여 디렉토리를 만듭니다.

제 경우에는 ~/var/www라는 디렉토리를 만들었습니다.

작성한 디렉토리에 React 앱을 git clone 합시다.

방금 만든 디렉토리에 git clone 를 합시다.
EC2 인스턴스에 git clone를 사용하는 경우 생성한 EC2 인스턴스의 ssh 공개 키를 GitHub에 등록해야 합니다.

EC2 서버의 ssh 키 쌍을 만들고 GitHub에 ssh 키를 등록합니다.

[ec2-user@ip-192-32-33-129 ~]$ ssh-keygen -t rsa -b 4096
Generating public/private rsa key pair.
Enter file in which to save the key (/home/ec2-user/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/ec2-user/.ssh/id_rsa.
Your public key has been saved in /home/ec2-user/.ssh/id_rsa.pub.
The key fingerprint is:
3a:8c:1d:d1:a9:22:c7:6e:6b:43:22:31:0f:ca:63:fa ec2-user@ip-172-31-23-189
The key's randomart image is:
+--[ RSA 4096]----+
|    +            |
| . . =           |
|  = . o .        |
| * o . o         |
|= *     S        |
|.* +     .       |
|  * +            |
| .E+ .           |
| .o              |
+-----------------+

※Enter를 누르면 이미지와 같은 표기가 됩니다.

ssh 공개 키의 값을 GitHub에 등록합시다.

cat 명령을 사용하여 공개 키가 들어 있는 id_rsa.pub 파일의 내용을 터미널에 표시합니다.

[ec2-user@ip-192-32-33-129 ~]$ cat ~/.ssh/id_rsa.pub

모두 (ssh-rsa에서 마지막 문자까지) 복사합니다.

ssh-rsa AAAs3NzaC1yc2EAAASADAQABavasAQDLwt......

htps : // 기주 b. 코 m/세친 gs/케 ys
위의 URL에서 키를 추가합시다. (타이틀은 모두 OK입니다.)

git clone이 끝나면 yarn run build를 실행합시다.

방금 만든 디렉토리에 git clone이 완료되면 clone 한 앱으로 이동하여 yarn run build를 실행하십시오.

실행하면 앱 내에 build 디렉토리가 만들어지고 그 안에 index.html가 생성되면 OK입니다.

※yarn run build를 실행해도 index.html이 생성되지 않는 경우는 메모리 부족의 가능성이 있습니다.
yarn run build 명령은 메모리를 꽤 먹는 것 같고, 여러 번 해도 생성되지 않는 경우는, 한 번 EC2를 정지시켜, 재기동해, 다시 실행해 봅시다.

Nginx 구성 파일을 만들고 편집해 봅시다.

Nginx의 설정 파일은 /etc/nginx/conf.d/***.conf에 작성합시다. (파일명은 무엇이든 OK입니다)

만들 수 있으면 아래와 같이 편집합시다.

/etc/nginx/conf.d/***.conf

server {
  listen       80;
  server_name  IPアドレス;
  charset      utf-8;

  # ドキュメントルートを指定.
  root /var/www/アプリ名/build;
  index index.html;

  # リクエストされたリソースがなければ、index.htmlを返却.
  location / {
    try_files $uri /index.html;
  }

}

위에서 프런트 엔드 측 설정은 종료입니다.

IP 주소에 연결하고 앱이 표시되면 OK입니다.
※Nginx의 설정 파일을 편집한 자취는 반드시 restart 합시다.

sudo systemctl restart nginx

고마워요.

참고 문헌 목록