美文网首页
nuxt.js 部署

nuxt.js 部署

作者: 爱吃豆包 | 来源:发表于2020-11-01 23:22 被阅读0次

    1、服务器安装node

    因为最后要靠 node 才能启动

    2、安装pm2

    pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块

    npm install -g pm2
    

    可能需要建立软连接

    ln -s 你的nodejs的目录一般情况下/bin/pm2 /usr/local/bin
    

    建议把 nodejs 目录下的bin目录直接添加到环境变量,更方便

    3、部署

    • 本地运行npm run build打包,然后把.nuxtstaticnuxt.config.jspackage.jsonpackage-lock.json上传到服务器

    最后服务器项目目录里面就是这几个文件
    .nuxt
    static
    nuxt.config.js
    package.json
    package-lock.json

    上传好后,运行npm install安装依赖(建议npm install --unsafe-perm=true --allow-root
    最后运行npm run start启动项目

    • 另外一种方法在服务器上打包上传整个项目到服务器上,当然像node_modules.idea之类的除外,接着依次运行:
    npm install
    npm run build
    npm run start
    

    如果有node-sass模块,安装过程可能会报错,运行npm install node-sass --unsafe-perm --save-dev来单独安装这个模块就好了。建议直接npm install --unsafe-perm=true --allow-root

    使用pm2守护进程运行项目

    刚才已经安装了pm2,在项目上传后,进入项目目录,用pm2执行运行命令

    pm2 start npm --name "nuxt" -- run start
    

    pm2 start npm --name "nuxt" -- run start表示在项目目录执行 npm run start,
    但是 pm2 的写法就是 pm2 start npm --name "nuxt" -- run start 中间要有 --
    然后--name "nuxt" 表示pm2给这个项目起个名称

    pm2还有很多命令,常用的

    pm2 list // 查看任务列表
    pm2 stop app_name|app_id // 停止指定name或者id的任务
    pm2 stop all // 停止所有任务
    pm2 delete app_name|app_id // 删除指定name或者id的任务
    pm2 delete all // 删除所有任务
    pm2 logs // 查看日志
    pm2 kill // 杀死pm2进程

    Nginx配置

    #t-backend是自定义后台的名字,下面会用到这个。
    # 这里的【127.0.0.1:9002】是后台接口地址
    # upstream test-backend {
    #    server 127.0.0.1:9002;    
    # }
    
    # nuxt项目监听
    upstream nodenext {
        server 127.0.0.1:9000; #next项目 监听端口
        keepalive 64;
    }
    
    ## test-peoject虚拟服务器配置
    server {
        ## 监听端口
        listen 80;
        ## 服务名称
        server_name xxxx.com; # 域名或者IP
        
        # 文件访问控制
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
        ## 字符集编码
        charset utf-8;
        ## 访问日志
        # access_log logs/test-peoject.access.log main;
        ## 错误日志
        # error_log logs/test-peoject.error.log main;
        # 客户端请求体最大值
        client_max_body_size 500m;
        # 黑名单配置
        # deny 192.53.163.212;
    
       
        gzip on;
        gzip_types application/javascript text/css image/jpeg image/png;
    
    
        ## 原型图
        location /work {
            root /root/resources/;
        }
    
        # 文件服务器
        location /little-monsters-file {
            root /N-cbcwm/;
        }
    
        # api请求
        location /api {
            proxy_pass   http://127.0.0.1:8082;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    
            # 如果是请求类型是 OPTIONS 就直接返回 200
             if ($request_method = OPTIONS ) {
                return 200;
            }
         }
    
          # 访问nuxt项目 bbsgo-view
         location / {
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;  
             proxy_set_header Connection "upgrade";
             proxy_set_header Host $host;
             proxy_set_header X-Nginx-Proxy true;
             proxy_cache_bypass $http_upgrade;
             proxy_pass http://nodenext; #反向代理
             gzip on;
             gzip_types application/javascript text/css image/jpeg image/png;
          }
    
    
    
        ## 代理前端图片,缓存时间长一点
        # location ~ ^(/static/).+\.(jpg|jpeg|gif|png)$ {
        #    access_log off;
        #    root html/test-project;
        #    expires 15d;
        # }
        ## 通过客户端请求头信息
        proxy_pass_request_headers on;
        ## 保留客户端的真实信息
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        ## 转发后台请求,这个用到了test-backend(前面已定义的)
        #  location /test-pro {
        #    proxy_pass http://test-backend;
        # }
    }
    
    

    转载并参考

    nuxt部署
    next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    相关文章

      网友评论

          本文标题:nuxt.js 部署

          本文链接:https://www.haomeiwen.com/subject/riuuvktx.html