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

相关推荐
LCG元2 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian2 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼2 小时前
【前端知识】常用CSS样式举例
前端·css
wl85112 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20162 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌2 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构
傻小胖3 小时前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
wl85113 小时前
Vue 入门到实战 七
前端·javascript·vue.js
Enti7c4 小时前
用 HTML、CSS 和 JavaScript 实现抽奖转盘效果
前端·css
LCG元4 小时前
Vue.js组件开发-使用Vue3如何实现上传word作为打印模版
前端·vue.js·word