웹서버에 완성된 nnxt.js 앱을 배포하는 방법?

웹서버에 완성된 nnxt.js 앱을 배포하는 방법?

직장에서, 나는 nuxtjs 개발에 대한 약간의 통찰력을 얻었고 그것에 매우 관심을 가지게 되었다.그래서 나는 조금씩 스스로 개발을 시작했지만, 지금은 완성된 프로젝트에서 벗어나지 못하고 있어.

개발을 위해 CLI에 "npm run dev"가 있는 로컬 서버를 스핀업한다.이 모든 것이 잘 된다.

그러나 홈 서버에서 nginx(또는 Windows Server 환경에서 실행되는 더 나은 대안이 있는가)와 같은 환경에서 실행하기 위해 현재 완료된 프로젝트를 어떻게 배포해야 하는가?내 CLI에 "npm run build"라는 말을 들었는데, 그 이상의 절차는 어떤가?그리고 그 명령도 옳은 방법인가?

나는 이 과에서 절대적으로 인기가 없다.내가 "생산 중"으로 가기 위해 해야 할 일을 차근차근 가르쳐 줄 수 있는 사람?

미리 고맙다!

맥스.

물론, "npm 런 데브"는 생산에 실행 가능한 옵션은 아니다.서버가 실행 중인 컴퓨터에서만 액세스할 수 있다.

가장 간단한 방법 - 모든 컨텐츠를 생성해야 함:

1. 달리다npm run generate.
2. 가시오dist프로젝트의 하위 폴더를 복사하여 GitHub Pages와 같은 공개 호스팅에 복사하십시오.

사용자의 컨텐츠가 종속되어 있는 경우 SPA로 배포하십시오.

1. 변화하다mode에nuxt.config.js로spa.
2. 달리다npm run build.
3. 생성된 배포dist/서지, GitHub 페이지 또는 nginx와 같은 정적 호스트 폴더.

자세한 내용:

https://nuxtjs.org/guide/commands#static-generated-deployment-pre-rendered-

https://nuxtjs.org/faq/github-pages#how-to-deploy-on-github-pages-

이 질문에 대한 답은 하나 없으며 주요 변수는 정적 앱 또는 범용(ssr) 앱을 배포하고 어디에서 호스팅할 것인가입니다.

정적 앱은 코멘트나 기타 답변에서 제시된 바와 같이 매우 직설적이지만 SSR 앱을 보유하고 있으며 이를 구축해야 할 가능성이 있다.

문서에는 nginx를 사용하는 것뿐만 아니라 다양한 호스팅 공급자에게 배포하는 것에 대한 세부사항이 있다.

디지털 오션에 배치하기 위한 튜토리얼이 있다.

일부 호스팅 공급자는 다른 제공업체보다 쉽고 실제로 CLI를 제공하는 공급업체는 일반적으로 더 쉽다.따라서 Heroku는 Now와 Netlify와 마찬가지로 좋은 선택이지만, 이후 두 가지는 정적 앱만을 위한 것이다.의사들이 "AWS는 1000개의 종이컷에 의한 죽음"이라고 말하니까, 그건 쉽지 않을 것 같아.

따라서 호스팅 옵션을 확인하고 하나를 선택하고, 배포할 nuxt 문서를 따라 보십시오. 문제가 발생할 경우 여기에서 자세한 사항을 질문하십시오.

여기에서는 nginx를 기반으로 한 Docker에 뒤이어 Nuxt가 어떻게 운영될 수 있는지 보여 주겠다.이는 범용 모드(서버 측 렌더링 + 클라이언트 측 탐색용, 즉 다음에 의해 생성된 정적 사이트가 아님)를 위한 것이다.nuxt generate권장)

구조

|- nuxt # (this is project folder)
|    |- dockerfiles
|        |- nginx
|            |- prod
|                |- conf.d
|                    |- nginx.conf
|    |- docker-compose-wo-le.yml
|    |- nginx.tmpl # (must be downloaded, read top comments in docker-compose-wo-le.yml)
|- src
|   |- .nuxt
|         |- folders and files here
|   |- assets
|   |- components
|   |- .......
|   |- node_modules
|   |- .......
|   |- nuxt.config.js
|   |- package.json
|   |- package-lock.json

아래는 필요한 구성이다.

docker-doll-wo-le.yml

# HOW TO USE:
# 1. Download latest nginx.tmpl (save next to this docker-compose file):
#    curl https://raw.githubusercontent.com/jwilder/nginx-proxy/master/nginx.tmpl > ./nginx.tmpl
# 2. Run docker-compose: docker-compose -f ./docker-compose-wo-le.yml up -d

version: '3.5'
services:
  nuxt-nginx:
    restart: always
    image: nginx
    container_name: nuxt-nginx-container
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - ./nginx/prod/conf.d:/etc/nginx/conf.d
    ports:
      - '80:80'

  nuxt-node:
    image: node:10.23
    container_name: nuxt-node-container
    command: npm run start
    volumes:
      - ../src:/usr/src/app
    working_dir: /usr/src/app
    environment:
      HOST: 0.0.0.0

nginx.conf

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

proxy_cache_path /tmp/nuxt levels=1:2 keys_zone=nuxt_cache:10m max_size=100m inactive=30m use_temp_path=off;
proxy_cache_key "$scheme$request_method$host$request_uri";
proxy_cache_use_stale updating error timeout http_500 http_502 http_503 http_504;
proxy_cache_background_update on;
proxy_cache_valid 200 302 20m;

server {
    listen 80 default_server;
    server_name localhost;
    charset utf-8;
    keepalive_timeout 5;

    gzip            on;
    gzip_comp_level 5;
    gzip_types      text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
    gzip_proxied no-cache no-store private expired auth;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;

        proxy_pass http://nuxt-node:3000;

        # Required for caching
        proxy_ignore_headers Expires Cache-Control;
        proxy_cache_revalidate on;
        proxy_cache_lock on;
        proxy_cache nuxt_cache;
    }
}

1. 로컬에서도 실행이 가능하므로, 다음에 액세스하십시오.localhost브라우저(최소한 Linux에서).
2. 이것은 프로젝트에서 추출한 것이므로, 필요에 따라 단순화/제거할 수 있다.
3. 의 경우error Exit status 139터미널에서(도커 장착이 시작되면) 제거node_modules폴더를 다시 설치하십시오.

서버에서 Nuxt 애플리케이션을 테스트하고 배포하는 방법에 대한 자세한 기사를 작성했다.여기서 읽을 수 있다: https://medium.com/js-dojo/how-to-deploy-nuxt-application-to-server-production-mode-on-db67633421fd?source=friends_link&sk=32e2893ad759748e88cdaf7ecbf0b250

하다. 그 에는 IIS가 도도하게 된다.npm run build 다음 이한다.index.jsnuxtjs 문서에서 구성을 참조하십시오.

참조URL: https://stackoverflow.com/questions/56896966/how-to-deploy-a-finished-nuxt-js-app-to-a-webserver