cropped-DALL·E-2023-11-03-15.02.35-Vector-illustration-of-a-simple-geometric-style-gray-rabbit-with-glasses-doing-a-yawn-inside-a-neat-square-border.-The-design-is-clean-and-modern-w-1.png

Filezilla 를 이용해서 내 코드를 서버에 전송하자.

지난 포스팅으로 가기

위 포스팅에서 이어집니다.

이전 포스팅에서 FileZilla로 SFTP 접속을 아마존 인스턴스에 성공했습니다.

이제는 내 로컬에 있던 코드를 전송 시켜서, 실제 페이지를 가동시킬 겁니다.

도메인은 이미 구입을 해뒀습니다. 

 

로드맵

GPT 선생님의 도움을 받아 어떤 절차를 밟아야 할지 도움을 받았습니다.

차근차근 정리해보겠습니다. 

FileZilla를 통한 코드 업로드:

  • FileZilla를 열고, 이미 설정한 호스트 정보를 통해 EC2 인스턴스에 접속합니다.
  • 왼쪽 창(로컬 사이트)에서 업로드하고 싶은 로컬 코드를 선택합니다.
  • 오른쪽 창(원격 사이트)에서 /home/ec2-user/ 경로로 이동합니다.
  • 선택한 로컬 코드를 원격 사이트(오른쪽 창)으로 드래그 앤 드롭하여 업로드합니다.

웹 서버 설정:

  • 웹 서버(예: Apache, Nginx)를 아직 설치하지 않았다면 설치해야 합니다. 
				
					sudo apt update  # Ubuntu를 사용하는 경우
sudo apt install nginx  # Ubuntu를 사용하는 경우

sudo yum update  # Amazon Linux를 사용하는 경우
sudo yum install nginx  # Amazon Linux를 사용하는 경우
  • Apache의 경우, 기본 웹 루트 디렉토리는 /var/www/html/입니다. 여기로 코드를 이동 또는 복사해야 웹에서 접근 가능합니다.
				
					sudo cp -r /home/ec2-user/your_code_directory/* /var/www/html/

도메인 설정:

  • 도메인 제공자의 관리 대시보드로 이동하여, 도메인의 A 레코드를 EC2 인스턴스의 퍼블릭 IP 주소로 설정합니다.
  • DNS 설정이 전파되는 데는 시간이 좀 걸릴 수 있으니, 조금 기다렸다가 웹 브라우저에서 도메인 주소를 입력하여 접속해보세요.

FileZilla를 통한 코드 업로드

이전 포스팅에서 말했던 대로,

Host 에는 Public IP 를 .

User 에는 ec2-user 를 .

비번은 설정했던 대로, ‘편집 > 설정> ssh> .ppk 파일 업로드’ 까지 잊지 않고 저장해서 실행하면 오른쪽 화면과 같이 나올 것 같습니다.

Filezilla 화면에서 오른쪽 섹션들을 주목하면, 우리가 접속한 인스턴스에서 특정 파일로 들어갈 수 있습니다.

여기서 ec2-user 폴더 안에 제 로컬 코드를 넣어보도록 하겠습니다.

저는 로컬에서 우선적으로 사이트를 구성하기 위해서

React 를 통해 코드를 구성했습니다.

이때 total 이라는 폴더 내부에 

프론트엔드를 구성하는 코드를 front 폴더에, 

백엔드를 구성하기 위한 코드를 back 폴더에 넣었습니다. 

결과적으로 오른쪽 화면과 같이, total 이라는 폴더를 통째로 ec2-user 의 하위 경로로 업로드를 완료했습니다.

npm run build 명령어를 사용해서 생성된 폴더를 그대로 이용하셔야 합니다. 

웹서버 설정

이제 업로드 된 코드로 실제 페이지를 가동하기 위해,

서버의 설정을 할 차례입니다. 

서버는 Nginx 또는 Apache 를 선택하는 것을 추천받았는데요.

저는 Nginx 을 선택했습니다.

두 서버의 차이는 다음과 같습니다. 

Nginx:

  • 성능: 높은 동시성을 처리하도록 설계되었으며, 특히 정적 파일을 제공하거나 프록시 서비스를 사용할 때 매우 효율적입니다.
  • 리소스 사용: 더 적은 메모리를 사용하여 더 많은 요청을 처리할 수 있습니다.
  • 설정: 구성이 상대적으로 단순하고 이해하기 쉬우며, 모던한 웹 애플리케이션에 잘 맞습니다.
  • 리버스 프록시: 마이크로서비스 아키텍처 또는 컨테이너화된 애플리케이션에 적합합니다.

Apache:

  • 유연성: 다양한 모듈을 통해 많은 기능을 제공하며, 광범위하게 사용되고 있습니다.
  • .htaccess 파일: 디렉토리 레벨에서 세부적인 구성을 할 수 있어, 호스팅 환경에서 유용합니다.
  • 문서: 광범위한 사용으로 인해 문서화가 잘 되어 있고, 커뮤니티 지원이 풍부합니다.

선택에 대한 제안:

  • 성능이 중요하고 정적 파일이 많거나 리버스 프록시로 사용할 계획이라면 Nginx를 선택하는 것이 좋습니다.
  • 모듈식 구성을 원하고 .htaccess 파일을 통한 세부적인 설정이 필요하다면 Apache를 선택하는 것이 좋습니다.

이제는 저번과 같은 방식으로 Putty 를 통해 인스턴스에 접속합시다.

SSH 접속 이후, 우선 아래와 같은 명령어를 통해서 Nginx 를 설치해줍시다. 

				
					sudo yum update -y
sudo yum install -y nginx

위에서 설치가 완료 됐다면, nginx 를 실행하도록 해봅시다.

				
					sudo service nginx start

서버가 재부팅될 때마다 Nginx 가 자동으로 시작되도록 설정하고 싶다면 다음 명령어를 실행합시다. 

				
					sudo chkconfig nginx on

이제는 Nginx 설정 파일을 찾아야 합니다.

아래의 코드를 입력했을 때,


find: ‘/proc/141141’: No such file or directory

와 같은 문구가 여러 개 나온다면 성공입니다.

				
					sudo find / -name nginx.conf

이제 서버의 구성이 어떻게 되었는지 확인할 차례입니다.

아래 명령어를 입력하면 코드들이 줄줄이 발생할 텐데, 이때 컨트롤 + W 키를 눌러주면 search 창이 생길 겁니다. 

이 search 창에 아래 코드 노트에서 server { 라고 되어있는 부분을 입력하고 엔터 누르면 

				
					sudo nano/etc/nginx/nginx.conf

server { # for Search

아래와 같은 결과를 얻을 수 있을 겁니다.

이제 이 정보를 토대로, 설정을 변경해야 합니다.

처음에는 server_name 뒤에 _ 으로 설정이 되어 있을 건데, 이걸 본인의 도메인으로 타이핑해줘야 합니다.

타이핑 방법은 그냥 화면에 나타나는 녹색 커서를 마우스로 움직이시고, 백스페이스로 필요 없는 부분은 지우고 그런 식으로 하면 됩니다. 

지금 제 상황에서 말씀 드리자면  root /path 부분은..  home/ec2-user/total/front 를 집어 넣어야 할 겁니다. 

try_files 부분은 그냥 그대로 똑같이 입력하면 됩니다.

입력이 끝났다면, 컨트롤 + o 를 누르고 엔터 키를 누르면 저장 됩니다. 이후 컨트롤 + X 로 다시 편집창에 돌아옵니다.

				
					server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/react-app/build; # React 앱의 빌드 폴더 경로로 변경
        try_files $uri /index.html;
    }
}

돌아온 편집창에서 아래와 같은 명령어를 입력하여 nginx 설정에 문법이 올바른지 확인하고, 재시작을 합시다.

				
					sudo nginx -t

sudo systemctl restart nginx
# 또는
sudo systemctl reload nginx

그럼 이제 우리가 사용을 위해 구매한 example.com 도메인으로 이동 시, React 코드가 생성됩니다.