nginx部署静态页面(vue/uniapp)+node服务到同一服务器

守听  金牌会员 | 2024-8-24 02:54:59 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 551|帖子 551|积分 1653

一、预备工作

1、购买云服务器(我购买的是腾讯云)

   (1)腾讯云链接: 登录 - 腾讯云
  (2)我购买的是宝塔面板,最简朴的轻量服务器;https://console.cloud.tencent.com/lighthouse/instance/index?rid=8
  2、使用腾讯云OrcaTerm终端:连接服务器工具

注: 使用root脚色,不然有些地方权限不够;

3、安装nginx、mysql、nvm等

(1)安装nginx

参考https://cloud.tencent.com/developer/article/1654844
   执行以下命令:
  1. cd到根目录: cd /
  2. 安装以下依赖
  yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
  3、创建一个文件夹
  cd /usr/local
  mkdir nginx
  cd nginx
  //下载tar包
  wget http://nginx.org/download/nginx-1.13.7.tar.gz
  // 解压包
  tar -xvf nginx-1.13.7.tar.gz
  4、安装nginx
  // 进入nginx目录
  cd /usr/local/nginx
  // 进入目录
  cd nginx-1.13.7
  // 执行命令
  ./configure
  // 执行make命令
  make
  // 执行make install命令
  make install
  // make时候遇到问题的解决方案
  https://blog.csdn.net/Mercycpp/article/details/121629994
  https://blog.csdn.net/weixin_44065695/article/details/126632836
  5、启动nginx服务
  
  /usr/local/nginx/sbin/nginx -s reload
  大概
  cd /usr/local/nginx/sbin/
  启动服务: ./nginx 
  停止服务: ./nginx -s stop
  重启服务:./nginx  -s reload
  ⚠️:执行命令后没有任何信息,就是最好的消息!!!
  (2)安装mysql

   可以自己百度搜linux安装mysql;
  但是我安装mysql失败,末了安装的是mariadb: https://blog.csdn.net/miaodichiyou/article/details/99289160
  (3)安装nvm

参考链接: 
CentOS7下安装nvm-腾讯云开发者社区-腾讯云
   a.下载nvm包
  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
  b. 
  command -v nvm
  c. 设置nvm自动运行
  echo "source ~/nvm/nvm.sh" >> ~/.bashrc
  source ~/.bashrc
  d. 查看node版本: nvm list-remote
  e. 安装16版本的node: nvm install v16.14.0
  (4)安装pm2

    npm install -g pm2
  二、部署一个静态页面(hbuildx的h5项目)

   (1) 在服务器中建立一个文件夹, 路径如下: mkdir /home/www;
  (2) 本地打包前端项目, 打包后将unpackage/dist/build/h5文件夹上传到服务器的 /home/www 文件夹下, 并将h5改名为dist即可;
  (3) 修改nginx.conf文件,vim nginx.conf
  a. user root; # 修改为root用户, 不修改的话可能页面会出现403 forbidden;
  b. 修改server内里的配置
  server {
          listen 80; // 修改为80端口
          server_name xxx; // 修改为你购买的服务器的ip所在
          location / {
                  root /home/www/dist; // 你的前端项目上传到的文件夹路径
                  try_files $uri $uri/ @router; // 防止革新页面404
          }
          //防止革新页面404
          location @router {
                  rewrite ^.*$ /index.html last;
          }
  }
  (4) 此时应该通过服务器的ip所在访问你的页面了!即http://xxx/
  三、部署一个node服务到同一服务器

   (1)在服务器中建立一个文件夹, 路径如下: mkdir /home/admin;
  (2) 将node项目上传到服务器的 /home/admin 文件夹下
  (3) 像在本地运行代码一样,在/home/admin文件夹下执行npm install, 并找到app.js文件,执行node app.js;
  (4) 可以重新打开一个终端,执行curl http://xxx/ 看下是否可以访问到node服务;
  (5) 在nginx.conf文件中添加以下设置:
  location /api/ {
          # 我们后端express服务启用的端口是9999,所以这里就转发到这个所在
          proxy_pass http://xxx:3000/;
          # 下面三句话是用来获取用户访问的ip的
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $remote_addr;
  }
  
  注: 此时可以在浏览器中访问: http://xxx/api/ 来访问node服务;
  这里是通过识别api路径, 来将哀求转发到http://xxx:3000/,因此前端哀求接口的路径应该是: http://xxx/api/;

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

守听

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表