FC-DEV-FinalProject / final-fe-team4

4조 프론트엔드 깃허브
0 stars 2 forks source link

[setting] AWS 도커 배포 #123

Closed sjgaru-dev closed 2 weeks ago

sjgaru-dev commented 2 weeks ago

close #32

백엔드 맞춰서 프론트엔드도 메인 브랜치 배포과정 수정했습니다.

Summary by Sourcery

Docker를 사용하여 프론트엔드 애플리케이션을 AWS EC2에 배포하기 위한 CI/CD 파이프라인을 설정합니다. 여기에는 Docker 이미지를 빌드하고, 레지스트리에 푸시하고, EC2 인스턴스에 배포하는 작업이 포함됩니다. 배포 성공 또는 실패에 대한 Slack 알림을 추가합니다.

CI:

Deployment:

Original summary in English ## Summary by Sourcery Set up a CI/CD pipeline for deploying the frontend application to AWS EC2 using Docker, including building Docker images, pushing them to a registry, and deploying them to an EC2 instance. Add Slack notifications for deployment success or failure. CI: - Add a CI workflow to build and push Docker images to a Docker registry, and deploy them to an EC2 instance. Deployment: - Introduce a new GitHub Actions workflow for deploying the frontend application to AWS EC2 using Docker.
sourcery-ai[bot] commented 2 weeks ago

리뷰어 가이드 by Sourcery

이 PR은 프론트엔드 애플리케이션을 위한 AWS Docker 배포를 구현합니다. EC2에 대한 자동 배포를 위한 GitHub Actions 워크플로우를 설정하고, Docker 이미지 빌드 및 Docker Hub로의 푸시를 구성하며, 프론트엔드 애플리케이션을 제공하기 위한 Nginx 구성을 포함합니다.

변경 사항이 간단해 보이며 시각적 표현이 필요하지 않으므로 다이어그램이 생성되지 않았습니다.

파일 수준 변경 사항

변경 사항 세부 사항 파일
AWS EC2 배포를 위한 GitHub Actions 워크플로우 구현
  • Node.js 환경을 설정하고 종속성을 설치합니다
  • Docker 로그인, 빌드 및 푸시 프로세스를 구성합니다
  • SSH를 사용하여 EC2 배포를 구현합니다
  • Docker 컨테이너 관리 명령을 추가합니다
  • 배포 상태에 대한 Slack 알림을 통합합니다
.github/workflows/awsdeploy.yml
.github/workflows/maindocker.yml
Nginx 서버 구성 추가
  • 포트 80에서 서버가 수신하도록 구성합니다
  • 루트 디렉토리 및 인덱스 파일을 설정합니다
  • SPA(단일 페이지 애플리케이션)를 위한 URL 라우팅을 구현합니다
  • 오류 페이지 처리를 추가합니다
nginx.conf

연결된 이슈에 대한 평가

이슈 목표 해결됨 설명
#32 AWS 계정 구성 및 공유 설정
#32 배포를 위한 AWS 서비스 설정 구성

연결될 수 있는 이슈


팁 및 명령어 #### Sourcery와 상호작용하기 - **새 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 이슈를 생성하도록 Sourcery에 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령을 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화 [대시보드](https://app.sourcery.ai)에 액세스하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.
Original review guide in English ## Reviewer's Guide by Sourcery This PR implements AWS Docker deployment for the frontend application. It sets up a GitHub Actions workflow for automated deployment to EC2, configures Docker image building and pushing to Docker Hub, and includes Nginx configuration for serving the frontend application. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implementation of GitHub Actions workflow for AWS EC2 deployment |
  • Sets up Node.js environment and installs dependencies
  • Configures Docker login, build, and push processes
  • Implements EC2 deployment using SSH
  • Adds Docker container management commands
  • Integrates Slack notifications for deployment status
| `.github/workflows/awsdeploy.yml`
`.github/workflows/maindocker.yml` | | Addition of Nginx server configuration |
  • Configures server to listen on port 80
  • Sets up root directory and index file
  • Implements URL routing for SPA (Single Page Application)
  • Adds error page handling
| `nginx.conf` | ### Assessment against linked issues | Issue | Objective | Addressed | Explanation | | ------ | ------- | ----- | ----- | | #32 | Set up AWS account configuration and sharing | ✅ | | | #32 | Configure AWS service settings for deployment | ✅ | | ### Possibly linked issues - **#32**: PR modifies AWS deployment settings, aligning with the issue's focus on AWS configuration. ---
Tips and commands #### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).
sjgaru-dev commented 2 weeks ago

프로덕션 배포는 ec2보다는 s3 + cloundfront(cdn)으로 배포하는 것이 나을 것 같습니다. CDN을 사용할 경우 글로벌 엣지서버에 캐싱이 되서 글로벌 사용자에 대한 지연 시간이 감소한다는 큰 이점이 있고, 캐싱 전략으로 서버 부하가 감소한다는 장점이 있습니다. 개인적으로는 s3가 더 배포가 편해서 쓰긴합니다.

근데 사실 큰 문제는 없으니 이대로 사용해도 될 것 같긴합니다. 지금slack 알림도 디게 편하고, 나중에 aws가 아닌 다른 서비스로 배포하게 된다면 도커 설정들을 통해서 ci/cd 라인을 쉽게 만들 수 있을 것 같네요.

cloundfront는 지금 ALB 앞에 놓을 수 있어 현재 구조가 상위호환입니다.

프로젝트 지원이 가능한 기간동안에는 AWS 최대한 활용하려고 합니다. 현재 모니터링+목, 백엔드, 프론트엔드 총 3개의 서버가 돌아가고 있어 지원이 끊기면 말씀하신 방법이나 더 간단하게 모두 프리티어 범위 안으로 축소해서 내년 10월까지 무료로 서버유지 될 수 있도록 변경할 예정입니다.

nakyeonko3 commented 2 weeks ago

프로덕션 배포는 ec2보다는 s3 + cloundfront(cdn)으로 배포하는 것이 나을 것 같습니다. CDN을 사용할 경우 글로벌 엣지서버에 캐싱이 되서 글로벌 사용자에 대한 지연 시간이 감소한다는 큰 이점이 있고, 캐싱 전략으로 서버 부하가 감소한다는 장점이 있습니다. 개인적으로는 s3가 더 배포가 편해서 쓰긴합니다. 근데 사실 큰 문제는 없으니 이대로 사용해도 될 것 같긴합니다. 지금slack 알림도 디게 편하고, 나중에 aws가 아닌 다른 서비스로 배포하게 된다면 도커 설정들을 통해서 ci/cd 라인을 쉽게 만들 수 있을 것 같네요.

cloundfront는 지금 ALB 앞에 놓을 수 있어 현재 구조가 상위호환입니다.

프로젝트 지원이 가능한 기간동안에는 AWS 최대한 활용하려고 합니다. 현재 모니터링+목, 백엔드, 프론트엔드 총 3개의 서버가 돌아가고 있어 지원이 끊기면 말씀하신 방법이나 더 간단하게 모두 프리티어 범위 안으로 축소해서 내년 10월까지 무료로 서버유지 될 수 있도록 변경할 예정입니다.

오 cloudfront를 설정이 가능하면 지금 방식이 훨씬 나은 것 같습니다. 제가 잘못 말 한 것 같습니다. 죄송합니다

sjgaru-dev commented 2 weeks ago

큰일도 아닌데 죄송까지 안 하셔도 될 것 같습니다! ㅋㅋㅋ 😸