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

相关推荐
意法半导体STM32几秒前
【官方原创】STM32H7双核芯片通过 STlink连接失败问题分析 LAT1654
开发语言·前端·javascript·stm32·单片机·嵌入式硬件
小王C语言1 分钟前
【基础IO】————简单设计一下libc库
前端·数据结构·算法
雨雨雨雨雨别下啦14 分钟前
Vue3——RabbitShopping
前端·javascript·vue.js
BumBle18 分钟前
从声明式到命令式:Vue3 弹窗组件的工厂模式重构
前端
恋猫de小郭25 分钟前
你的蓝牙设备可能正在泄漏你的隐私? Bluehood 如何追踪附近设备并做隐私分析
android·前端·ios
取名不易1 小时前
vue-drawer-board 简单的画图功能
前端
学习指针路上的小学渣1 小时前
JavaScript笔记
前端·javascript
取名不易1 小时前
在 nuxtjs中通过fabric.js实现画图功能
前端
冰珊孤雪1 小时前
Android Studio Panda革命性升级:内存诊断、构建标准化与AI调试全解析
android·前端
用户806138166592 小时前
避免滥用“事件总线”
前端