如何将完成的 nuxt.js 应用程序部署到网络服务器？

Question

在工作中，我对 nuxtjs 开发有了一些了解，并且对它非常感兴趣。所以，我开始自己开发一点点，但现在，我被我完成的项目困住了。

为了进行开发，我在 CLI 中使用“npm run dev”启动了一个本地服务器。这一切正常。

但是，我如何部署我现在完成的项目以在我的家庭服务器上的 nginx 之类的东西中运行它（或者有更好的替代方案可以在 Windows Server 环境中运行）？我在 CLI 中听说过“npm run build”，但除此之外的过程如何？该命令甚至是正确的方法吗？

我绝对是这个部门的菜鸟。有人能一步一步教我做什么才能“投入生产”吗？

首先十分感谢！

最大限度

当然，“npm run dev”不是生产的可行选择。它只能从运行服务器的机器上访问。

Answer 1

最简单的方法 - 您需要生成所有内容：

1. 运行npm run generate。
2. 转到dist项目的子文件夹，然后将所有内容从那里复制到一些公共托管，例如 GitHub Pages。

但是，如果您有一些依赖于用户的内容，则需要将其部署为 SPA：

1. 改变mode在nuxt.config.js给spa。
2. 运行npm run build。
3. 将创建的dist/文件夹部署到您的静态主机，如 Surge、GitHub Pages 或 nginx。

更多细节：

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

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

Answer 2

这个问题没有一个答案，主要的变量是，您是部署静态应用程序还是通用 (ssr) 应用程序以及您想在哪里托管它。

正如评论和其他答案中所建议的那样，静态应用程序非常简单，但您可能有一个 SSR 应用程序并且需要部署它。

这些文档包含有关部署到一系列托管服务提供商的详细信息以及有关使用 nginx 的一些信息。

有一个部署到数字海洋的教程。

一些托管服务提供商比其他托管服务提供商更容易，而真正提供 CLI 部署的托管服务提供商通常更容易。因此 Heroku 与 Now 和 Netlify 一样是一个不错的选择，但后两者仅适用于静态应用程序。文档说“AWS 是由 1000 次剪纸造成的死亡”，所以我想这并不容易。

因此，您应该检查您的托管选项并选择一个，尝试按照 nuxt 文档进行部署，如果遇到问题，请在此处提出另一个问题并提供详细信息。

Answer 3

这里我将展示 Nuxt 如何基于 nginx 在 Docker 后面的生产环境中运行。这是通用模式（服务器端渲染+客户端导航，即不是由命令生成的静态站点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-compose-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在终端中（docker-compose 启动后），请删除node_modules文件夹并再次安装。