一次全栈项目部署 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

相关推荐
zach4 小时前
前端落地实战:Next.js 项目 Nginx + PM2 生产部署全流程(附踩坑总结)
前端·pm2·next.js
overmind4 小时前
oeasy教h5前端001 修改的乐趣_直接修改在线网页
前端
只睡四小时4 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
恋猫de小郭4 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
庄园特聘拆椅狂魔4 小时前
从连连看到粒子消散——前端小游戏与视觉特效的技术选型
前端
JudithHuang4 小时前
React 常用 Hooks
前端·react.js·前端框架
sycmancia5 小时前
Qml——Window元素使用
前端
每天都好困5 小时前
03 AR 投影与误差修正:把地图上的点贴到视频画面上
前端
每天都好困5 小时前
04 地图图层封装:像管理 Photoshop 图层一样管理地图元素
前端
去伪存真6 小时前
构建你的第一个 DevOps AI Agent:自动化捕获、分析并修复 CI 故障
前端·agent