将前端页面部署到服务器上去(nginx)

109 阅读1分钟

1.材料准备

必备材料: 前端打包文件dist、nginx安装包、一个服务器

辅助材料:Xshell、FileZilla

nginx安装包:pan.baidu.com/s/1HAETL7ro…
提取码:8888

2.nginx安装

解压安装包得到如下文件 image.png 服务器上创建对应文件夹

cd /usr/local/
sudo mkdir nginx
cd /nginx 

将解压文件上传到服务器nginx目录下 可以输入命令

sudo rz

进行上传,也可以用FileZilla进行文件上传,这边建议用FileZilla进行上传

安装nginx 先安装gcc

cd /usr/local/nginx/gcc 
sudo rpm -Uvh *.rpm --nodeps --force

检测gcc是否安装成功

gcc -v

安装成功会显示版本号 再安装g++ 同理

cd /usr/local/nginx/gcc-c++/
sudo rpm -Uvh *.rpm --nodeps --force

解压并安装pcre

cd .. 
sudo tar -zxvf pcre-8.35.tar.gz
cd ./pcre-8.35 
sudo ./configure 
sudo make sudo make install

解压并安装 libtool

cd /usr/local/nginx/ 
sudo tar -zxvf libtool-2.4.2.tar.gz 
cd ./libtool-2.4.2
sudo ./configure 
sudo make 
sudo make install

解压并安装 nginx

cd /usr/local/nginx/ 
sudo tar -zxvf nginx-1.14.0.tar.gz 
cd ./nginx-1.14.0 
sudo ./configure 
sudo make 
sudo make install

运行nginx

cd /usr/local/nginx/sbin/ 
sudo ./nginx

输入服务器域名出现

image.png

即:nginx配置成功 若有不理解可以看blog.csdn.net/m0_49774332… 这篇文章

3.页面部署

前端打包dist文件上传

将dist文件上传到服务器,dist文件名可以任意更改,上传到服务器,记住位置 (可以用指令 sudo rz 也可以用)

image.png 为了方便,我这里文件名没有做更改

页面部署 修改nginx.conf 配置

image.png 重启nginx

cd /usr/local/nginx/sbin
sudo ./nginx -s reload

浏览器输入地址,能正常访问页面即部署成功