一次全栈项目部署 centos+pm2+nginx+mysql

工具:

xshell 连接云服务器

xftp 上传dist和server后端代码

centos

安装nginx

复制代码
sudo yum install nginx -y

安装nvm

  1. 咱们这里就按照 会频繁切换来做 ,直接安装 nvm
shell 复制代码
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  1. 出现以下打印表示 nvm 安装成功

  2. 但是此时,nvm 是无法直接使用的,因为我们还没有把它添加到 环境变量 中。此时执行 nvm -v 会得到如下打印:

  3. 想要正常使用,可以通过如下命令 添加 nvm 到环境变量

shell 复制代码
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
source ~/.bashrc
  1. 此时再次执行 nvm -v ,打印成功:

  2. 有了 nvm 之后,就可以直接安装指定的 node 版本了。比如:我这了安装 16 的版本:

shell 复制代码
nvm install 16

项目上传时不上传node_module,node_module在服务器安装

node安装完成,就进入项目目录,安装依赖

css 复制代码
npm i

7.安装pm2

css 复制代码
npm i pm2 -g

进入项目目录,pm2 start index.js

查看运行状态

xml 复制代码
 pm2 logs <应用程序名称或 ID>,就是上面表格的name

ctrl+c退出

安装mysql,用dbeaver连接查看

juejin.cn/post/722440...

报错, 可以尝试暂时禁用 GPG 密钥检查(不过这会有一定安全风险,不建议长期使用)。编辑 /etc/yum.repos.d/mysql-community.repo 文件,将 gpgcheck 选项的值改为 0

ini 复制代码
[mysql80-community]
name=MySQL 8.0 Community Server
baseurl=http://repo.mysql.com/yum/mysql-8.0-community/el/7/$basearch/
enabled=1
gpgcheck=0  # 禁用 GPG 密钥检查
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql-2022

然后再次尝试安装:

vbscript 复制代码
sudo yum install mysql-community-server

通过以上步骤,你应该能够解决 GPG 密钥验证问题并成功安装 mysql-community-server

配置nginx

每次修改nginx.conf,都要重启nginx服务!

复制代码
sudo nginx -s reload

静态资源dist路径

bash 复制代码
location / {
            root   /var/my/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

跨域

bash 复制代码
location /api {
     add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

      proxy_set_header   Host              $host;
      proxy_set_header   X-Real-IP         $remote_addr;
      proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
      if ($request_method = "OPTIONS") {
      add_header 'Access-Control-Allow-Origin' "$http_origin";
      add_header 'Access-Control-Allow-Credentials' "true";
      add_header 'Access-Control-Max-Age' 86400;
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
      add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';
      add_header 'Content-Length' 0;
      add_header 'Content-Type' 'text/plain, charset=utf-8';
      return 204;
    }
  }

就是这个预检请求OPTINOS,没配置post请求会404

因为post发两次请求

预检请求(Preflight Request)是在跨域 HTTP 请求中,浏览器为了了解服务器支持的请求方法和头信息而发送的一种 OPTIONS 请求。

简单理解为浏览器在发送跨域请求前发一个这个预检请求OPTINOS来保证浏览器安全性

我们直接在配置文件中对这个预检请求OPTINOS进行修改,允许这个请求跨域。

最后登录服务器的公网ip

相关推荐
李@十一₂⁰2 小时前
HTML 特殊字体符号
前端·html
小奶包他干奶奶4 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy4 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
潘小安5 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen5 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端5 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js
q***d1735 小时前
React桌面应用开发
前端·react.js·前端框架
8***29316 小时前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring
0***146 小时前
React计算机视觉应用
前端·react.js·计算机视觉
Q***K556 小时前
React高级
前端·react.js·前端框架