腾讯云通过nginx部署 vue和react

优速盾-小U • 2024年8月24日 12:48 • 网站百科 • 阅读 96

腾讯云通过nginx部署前端项目

选购方面

一般选择普通的 liunx 或基于它的centOS系统等等
如果购买完成我们来到个人页面->找到自己购买的服务器
点击登录

1、安装nodeJs

点击登录输入一下命令 (切换为root用户 , 防止权限不足)

sudo su root

我们进入到用户本地目录将nodeJs安装在这里

Ⅰ、进入该目录

cd /usr/local/

Ⅱ、下载nodeJs 压缩包

wget https://nodejs.org/dist/v16.0.0/node-v16.0.0-linux-x64.tar.xz

Ⅲ、解压nodeJs

tar xvf node-v16.0.0-linux-x64.tar.xz

Ⅳ、文件夹名称–>修改为nodejs 方便辨认

mv node-v16.0.0-linux-x64 nodejs

Ⅴ、配置环境变量

cd / vim /etc/profile

Ⅵ、编辑该文件

export PATH=/usr/local/nodejs/bin:$PATH

按 Esc –> 冒号 —> wq —> 回车进行保存

Ⅶ、然后重启

source /etc/profile

Ⅶ、测试是否安装成功（出现node 版本号就安装成功）

node -v

②在安装nginx 就能部署vue啦
Ⅰ、习惯还是在 /usr/local/ 目录下

cd /usr/local/

Ⅱ、下载nginx 压缩包

wget http://nginx.org/download/nginx-1.18.0.tar.gz

Ⅲ、解压nginx

tar -zxvf nginx-1.18.0.tar.gz

Ⅳ、进入nginx-1.18.0 、并设置安装路径安装

cd nginx-1.18.0 ./configure --prefix=/usr/local/nginx/ make make install

Ⅴ、查看是否安装成功（查看是否有成功提示）

cd .. ./nginx/sbin/nginx -t

Ⅵ、配置nginx.conf

vim nginx/conf/nginx.conf

图方便可以替换成如下配置（这里就不细讲了）

user root; #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; root /root/yhc/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; location /api { proxy_pass http://127.0.0.1:7001/api; proxy_set_header Host $proxy_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }