Linux入门(七) ~ Nginx部署Vue项目

超详细的Java知识点路线图



前言


安装Nginx

1、下载Nginx
http://nginx.org/en/download.html
在这里插入图片描述
2、上传
可以使用XShell+XFtp工具上传到/usr/local目录
或直接下载

wget -c https://nginx.org/download/nginx-1.12.0.tar.gz

3、解压

tar -zxvf nginx-1.12.2.tar.gz

4、安装相关的依赖工具

yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

5、配置

./configure

6、编译和安装
如果/usr/local下出现nginx目录,表示安装成功

make && make install

7、使用
启动

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

其他命令

./nginx -s stop		停止
./nginx -s quit		退出
./nginx -s reload  重启

8、打开80端口

firewall-cmd --zone=public --add-port=80/tcp --permanent (--permanent永久生效,没有此参数重启后失效)

重新载入

firewall-cmd --reload

或者关防火墙

systemctl stop firewalld

启动成功,打开浏览器输入:http://localhost,如果浏览器出现 Welcome to nginx! 则表示 Nginx 运行成功。
在这里插入图片描述

Vue项目部署

1、打包Vue项目
在前端项目的目录下,输入打包命令:

npm run build

项目出现dist目录
在这里插入图片描述
2、上传
将dist目录达成压缩包,上传到/usr/local下

3、解压
创建一个目录,将压缩包移动进去,再解压

mkdir oa_web
mv dist.zip oa_web
unzip oa_web/dist.zip

4、配置nginx
修改nginx.conf配置文件

vi nginx/conf/nginx.conf

修改配置,使nginx的根目录指向项目目录
在这里插入图片描述
5、重启nginx

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

重新访问http://localhost,页面就改为了前端项目的首页。

结束


大家如果需要学习其他Java知识点,戳这里 超详细的Java知识点汇总

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恒哥~Bingo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值