원활한 배포를 위해 Nginx를 사용하여 프런트엔드 애플리케이션을 Dockerizing

소개

대부분 프런트엔드 애플리케이션을 배포하려면 백엔드 API에서 정적 자산 제공을 분리해야 합니다. 이에 대한 좋은 접근 방식은 Nginx를 역방향 프록시로 사용하고 웹 서버를 Docker와 연결하여 컨테이너화하는 것입니다. 이 가이드에서는 Nginx와 Docker를 사용하여 프런트엔드 애플리케이션을 배포하는 방법을 안내합니다.

전제 조건

Nginx와 Docker를 사용하여 프런트엔드 애플리케이션을 배포하는 방법
소개
프런트엔드 애플리케이션을 효율적으로 배포하려면 백엔드 API에서 정적 자산 제공을 분리해야 하는 경우가 많습니다. 강력한 접근 방식은 Nginx를 역방향 프록시로, 웹 서버를 Docker와 결합하여 컨테이너화하는 것입니다. 이 가이드는 Nginx와 Docker를 사용하여 프런트엔드 애플리케이션을 배포하는 과정을 안내합니다.

전제조건
이 가이드를 따르려면 다음이 필요합니다.

• React(또는 모든 프런트엔드 프레임워크)에 대한 기본 지식
• Docker 및 Nginx에 대한 지식.

애플리케이션 설정

명확한 프로젝트 구조로 배포가 단순화됩니다. Docker 이미지를 빌드하려면 필요한 모든 파일을 폴더에 넣으세요. 이러한 파일에는 다음이 포함되어야 합니다.

• build/ 폴더(프로덕션에 바로 사용할 수 있는 정적 파일 포함).
• Dockerfile(이미지 빌드 방법을 정의).
• nginx.conf(사용자 정의 Nginx 구성).
• sites-enabled/ (선택적 추가 Nginx 구성).

Nginx 구성에 대한 자세한 설명은 여기

를 참고하세요.

React 향상: 손쉬운 배포를 위해 Nginx의 성능 활용

아미트 쿠마르 루트 ・ 2023년 12월 9일

#자바스크립트 #지도 시간 #반응하다 #nginx

단계:

1. 애플리케이션의 프로덕션 버전을 빌드하세요.

npm run build

이 명령은 최적화된 정적 파일이 포함된 build/ 디렉터리를 생성합니다.

1. Dockerfile 만들기: 컨테이너를 정의하려면 다음 Dockerfile을 작성하세요.

FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Docker 이미지 빌드

파일이 준비되면 Docker 이미지를 빌드하세요.

docker build -t my-app-img:prod .

다른 VM에 배포하는 경우 이미지를 .tar 파일로 패키징할 수 있습니다.

docker save my-app-img > my-app-img.tar

도커 이미지 실행

옵션 1: 이미지 직접 실행

1. .tar 파일에서 Docker 이미지를 로드합니다(시스템 간에 전송하는 경우).

cat my-app-img.tar | docker load

1. 컨테이너 실행:

docker run -itd -p 80:80 --name my-app my-app-img

이렇게 하면 컨테이너가 시작되어 포트 80에 노출됩니다.

옵션 2: Docker Compose 실행

docker-compose.yml 파일 생성:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

그런 다음 컨테이너를 시작합니다.

docker-compose up -d

결론

Nginx와 Docker를 사용하여 프런트엔드 애플리케이션을 배포하면 강력하고 확장 가능한 솔루션이 제공됩니다. 백엔드 API에서 정적 자산을 분리하여 최고의 성능을 제공하기 때문입니다. 다음과 같은 요구 사항에 맞게 Nginx 구성을 사용자 정의하세요.

• HTTPS 지원을 위해 SSL/TLS를 추가합니다.
• 고성능을 위해 캐싱을 켜세요.

이 설정을 통해 프런트엔드 애플리케이션이 프로덕션 환경에서 안정적으로 작동할 수 있습니다.

프로세스 개선을 위한 제안 사항이 있으면 댓글 섹션에 남겨주세요. 이 포스팅이 도움이 되셨다면 좋아요와 공유 부탁드립니다.

즐거운 코딩하세요!

위 내용은 원활한 배포를 위해 Nginx를 사용하여 프런트엔드 애플리케이션을 Dockerizing의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!