前端部署(1)--nginx直装

Monday1997
180 阅读3分钟

部署

仅用于记录前端项目的简单部署过程

1、直装

1、像react/vue这种是打包后依托web服务(nginx)进行部署

2、ssr-nuxt3、nestjs 依托于node服务 如下图

image.png

nginx部署

  • 通过ftp将前端上传
  • apt update更新源
  • 安装nginx环境

apt update 更行资源

apt install nginx -y安装nginx

systemctl status nginx查看nginx的情况

image.png

find . -name "nginx"查找nginx地址

配置

生成配置文件

切到如下目录操作目录etc/nginx/conf.d vi easy-vue.conf

server {
    listen 80;  # 监听端口 80
    server_name easy-vue.com;  # 绑定域名 easy-vue.com
​
    # 设置根目录为 /home/website/easy-vue
    root /home/website/easy-vue;
​
    # 默认入口文件为 index.html
    index index.html;
​
    # 处理根路径请求
    location / {
        try_files $uri $uri/ /index.html;  # 如果文件不存在，则返回 index.html
    }
​
    # 处理静态资源请求
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;  # 设置静态资源缓存时间为 30 天
        add_header Cache-Control "public, no-transform";
    }
​
    # 处理 404 错误
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
​
    # 处理 50x 错误
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

将nginx配置写入

nginx -t检查配置

image.png 编辑本地host

加入如192.168.31.97 easy-vue.com这样可以使用自定义域名访问

ping easy-vue.com 成功即可

systemctl restart nginx

线上的话购买域名之后可以配置域名的dns解析

node

安装nvm

按以下命令依次操作，其实和win系统中操作nvm类似

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

source /root/.bashrc

nvm ls-remote

nvm install v23.0.0

首次安装即为默认版本、 如下可以修改默认版本

nvm alias default v23.0.0

设置自动启动

vi ~/.bash_profile

source  ~/.bashrc
nvm use default

gitee.com/mirrors/nvm 可以运行node命令启动文件，下面介绍pm2启动

pm2.js
定义

PM2 是一个功能强大的 Node.js 进程管理工具，主要用于管理和监控 Node.js 应用程序

进程管理： PM2 可以轻松启动、停止、重启和删除 Node.js 应用进程

负载均衡：通过 Node.js 的集群模块，PM2 可以在多核 CPU 上启动多个进程，实现内建负载均衡，提升应用的并发处理能力

自动重启：当应用崩溃或服务器重启时，PM2 会自动重启应用，确保高可用性和稳定性

监控与日志管理：PM2 提供实时监控功能，显示 CPU、内存、网络使用情况等性能指标，并自动记录应用的标准输出和错误日志，方便开发者调试和排查问题

零秒停机重载：在维护升级时，PM2 支持零秒停机重载，无需停机即可更新应用

安装cnpm

npm i cnpm -g --registry=https://registry.npmmirror.com

cnpm i pm2 -g

nest部署

将本地打包的dist目录上传，文件包括dist|prisma|.env|package.json

执行node dist/main.js

即可挂载（ctrl+c即退出）

pm2挂载

pm2 start --name nest-app /home/chen/server/movie-nest/dist/main.js

pm2 list可以查看

nuxt部署

设置pnpm启动

  "engines":{
    "pnpm":"*"
  }

pnpm build 打包

将.output,.npmrc,package.json上传

pnpm i
​
node .output/server/index.mjs

端口冲突时

 PORT=3010 node .output/server/index.mjs

pm2启动

 PORT=3010 pm2 start --name nuxt-try .output/server/index.mjs

另一种pm2部署

nuxt.com/docs/gettin…

将官网中 ecosystem.config.cjs 复制并添加到文件ecosystem.config.cjs

执行 pm2 start ecosystem.config.cjs

ecosystem.config.cjs如下

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs',
      // 加入变量
       env_production: {
           BASE_URL: 'http://192.168.31.97:3000'
        }
    }
  ]
}

pm2 start ecosystem.config.js --env production

avatar
文章
阅读
粉丝