部署vue或react项目（腾讯云简简单单）

①购买腾讯云(必不可少)
1.如果你是25岁一下 ：可以学生价格几十元购买 点击这里
(一般选择普通的liunx或基于linux的centOS系统等等)
2.如果购买完成我们来到个人页面->找到自己购买的服务器
3.点击登录 -> 如图：------->

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

sudo su root

2.我们进入到用户本地目录 将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;
        }
    }
}

Ⅶ、然后我们将 npm run build 打包的文件夹 -->修改名 html
-----> 替换掉nginx/ 下面的 html 文件夹
为了方便 操作自己和服务器的文件互传 可以通过 xftp 来拖拽
下载 点击跳转 手机号填对、其他瞎填就能免费下载了

Ⅷ、最后我们启动nginx

/nginx/sbin/nginx

停止 ：/nginx/sbin/nginx -s stop
重启 ：/nginx/sbin/nginx -s reload

最后访问ip地址就可以访问部署的项目了

后面将讲到如何部署后端代码