가상 머신에 React/Vue 배포

6683 단어 webdevdevopsreactcloud


쿠버네티스는 너무 과할 것입니다.

3월에 nginx, 로드 밸런서, 리버스 프록시 등을 배워 보았습니다. 동시에 포트폴리오 사이트를 위한 도메인 구입을 고려하고 있었습니다. 이제 내가 얻은 이 새로운 슈퍼 파워를 적용하려고 시도하면서 정적 이력서 사이트를 가상 머신에 배포하려고 했습니다. 내가 어떻게했는지, 기사를 계속 읽으십시오 ...

1단계: 사이트 도커화



vite-vue를 사용하여 포트폴리오 사이트를 만듭니다. 다른 섹션을 구성 요소로 나눌 수 있고 정보를 업데이트하기가 더 쉽기 때문에 물어볼 수 있는 이유입니다. 최종 빌드는 콤팩트하고 아무도 쉽게 복사할 수 없습니다(저는 유명인도 저명한 소프트웨어 엔지니어도 아닙니다).

이것은 내 구성 파일입니다. Dockerfile . 이것은 react, vue, angular 또는 모든 프레임워크에서 작동합니다(다른 사람들에게도 작동하기를 바랍니다).

FROM node:15.12.0-alpine3.10 as build-stage
WORKDIR /app
COPY . ./
RUN yarn install && yarn run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf


  • 이 문서를 해결하려면 docker base 이미지here의 버전을 확인하십시오.
  • 또한 프레임워크가 생성하는 최종 빌드 폴더를 확인하십시오.

    이름이 다른 파일을 만듭니다/dist.

    **/node_modules
**/dist


    다시 보기.dockerignore
    VM/dist이 아닌 프로젝트 디렉토리에 nginx.conf 파일이라는 파일을 생성합니다.

    user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}


    변경 사항 저장 및 커밋

    가상 머신 생성



    이제 이것은 VM이 있고 그것에 대해 약간의 지식이 있다고 가정하는 부분입니다.
  • AWS EC2를 사용하는 경우 포트 80에서 모든 사용자에게 액세스 권한을 부여하는 새 보안 그룹을 생성합니다
    • .
  • Digital Ocean 또는 이와 유사한 서비스를 사용하고 있다면 이 서비스를 사용할 수 있기를 바랍니다

    • VM을 생성한 후 다음을 설치합니다.

    sudo apt-get install nginx nano letsencrypt


  • /etc/nginx 편집기의 경우 git이 필요할 수도 있습니다.

    • 그런 다음 : nano를 실행하고 브라우저를 사용하여 VM의 외부 IP로 이동하면 nginx의 시작 페이지가 표시됩니다. 그렇지 않은 경우 VM을 다시 시작하거나 5분 동안 기다리십시오. 그렇지 않으면 네트워킹 문제가 있습니다.

    여기까지 다 끝났어, 훌륭해

    그런 다음 도커를 설치하십시오.

    curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh


    도커 컨테이너 구축


  • VM에서 저장소 복제
  • nginx -s reload 그것으로
  • 실행

    • sudo docker build . -t resume
sudo docker run -d -p 8080:80 resume


    온라인으로 만들기



    아직 자신의 도메인 이름이 없다면 계속 읽으세요. 그렇지 않으면 다음 부분으로 건너뛰세요.
  • 관리자로서 cd 폴더에서 기본nginx.conf 파일을 삭제합니다.

    • sudo rm -f /etc/nginx/nginx.conf


  • 다음을 실행하여 /etc/nginx 디렉토리에 새 nginx.conf를 만듭니다.

    • sudo nano /etc/nginx/nginx.conf


  • 이 파일을 사용하려면 수퍼유저가 있어야 합니다
    • .
  • 다음 콘텐츠 붙여넣기

    • http {
  server {
    listen 80;
    location / {
      proxy_pass http://127.0.0.1:8080/;
    }
  }
}

events { }

    /etc/nginx를 눌러 파일을 저장하고 확인하고 ctrl+o를 눌러 종료합니다.

    그런 다음 실행

    sudo nginx -s reload


    VM의 외부 IP로 이동하면 사이트가 표시됩니다.

    자신의 도메인이 있는 경우



    임시 인증서를 생성하려면 다음을 실행하십시오.

    sudo certbot certonly --standalone


    모든 단계를 거쳐

    키는 다음 위치에 있습니다.

    /etc/letsencrypt/live/[ dns ]/fullchain.pem
/etc/letsencrypt/live/[ dns ]/privkey.pem

    ctrl+x 폴더에서 nginx.conf를 열고 내용을 /etc/nginx로 바꿉니다.

    http {
    server {
        listen 80;
        listen 443 ssl http2;
        ssl_certificate /etc/letsencrypt/live/{dns without http and www}/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/{dns without http and www}/privkey.pem;
        ssl_protocols TLSv1.3;
        location / {
          proxy_pass http://127.0.0.1:8080/;
        }
    }

}

events { }

    {dns without http and www}를 실행하고 기다렸다가 도메인을 확인합니다.

    아무 문제나 오류가 있으면 아래에 댓글을 달아주세요.
    psyhon 도전일기①
    [JS] #3 Iteration

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage