AWS ECR 생성 및 레포지토리에 이미지 업로드

ECR 부분은 한국어 지원이 안되나 보다.

 

레포지스토리는 frontend 용과 backend 용 2개 생성

하기와 같은 방식으로 kang-backend 생성

 

 

Cloud9 생성 (Cloud9은 기본적으로 도커와 깃이 설치되어 있다.)

Cloud9 으로 생성되는 인스턴스에 퍼블릭IP가 부여되지 않으면 Cloud9 사용이 불가하므로 자동으로 IP 할당되게 서브넷에서 설정 (Cloud9 은 모든 가용 용역에서 기본 서브넷 사용)

 

나의 경우, 현재 가용 용역을 2개 만들었기 떄문에 각각의 가용 용역의 public subnet 부분에 하기 설정 활성화

 

 

AWS Cloud9 > 환경 > 환경 생성

새로운 EC2 인스턴스 : t2.micro

네트워크 설정 > 연결 : AWS Systems Manager(SSM)

 

 

git clone으로 자료 가져오기

git clone https://github.com/kimdragon50/facam-frontend

 

header file

import React, { Component } from "react";

export default class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <header>
          <nav className="navbar navbar-expand-md navbar-dark bg-dark">
            <div>
              <a href="http://www.kaggroup.link" className="navbar-brand">
                Hello ECS
              </a>
            </div>
          </nav>
        </header>
      </div>
    );
  }
}

 

 

Dockerfile

FROM node:12.16.2 as builder

# 작업 폴더를 만들고 npm 설치
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
#RUN npm install react-scripts@3.4.1 -g --silent

# 소스를 작업폴더로 복사하고 빌드
COPY . /usr/src/app
RUN npm run build

FROM nginx:1.19

# nginx의 기본 설정을 삭제하고 앱 소스에서 설정한 파일을 복사
# 소스 코드에 /conf/conf.d 파일이 있어야함
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# 위에서 생성한 앱의 빌드산출물을 nginx의 샘플 앱이 사용하던 폴더로 이동
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 80포트 오픈하고 nginx를 백그라운드로 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

 

푸시 명령어 확인

 

 

하기와 같이 cloud9 에 명령어 입력

 

 

레포지토리에 이미지가 올라온 것을 볼 수 있다.