Linux服务器部署vue项目到nginx

Linux服务器部署vue项目到nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好。

VUE是一套前端框架,免除了原生JavaScript中的DOM操作,简化书写 
VUE基于MVVM(Model-View_ViewModel)思想,实现数据双向绑定

部署环境

	Linux版本:centos7.6
	nginx:1.21.4
	VUE:VUE 3

1、安装nginx

1)解决软件的依赖关系,需要安装的软件包

yum install epel-release -y
yum -y install unzip zip zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc gcc-c++ autoconf automake make psmisc net-tools lsof vim  wget -y

2)新建sc用户和组

id  sc || useradd sc -s /sbin/nologin

3)下载nginx软件

mkdir  /sc99 -p
cd /sc99
wget  https://nginx.org/download/nginx-1.21.4.tar.gz

4)解压软件

tar xf nginx-1.21.4.tar.gz 

5)进入解压后的文件夹

cd nginx-1.21.4

6)编译前的配置

./configure --prefix=/usr/local/sc99  --user=sc --group=sc  --with-http_ssl_module   --with-threads  --with-http_v2_module  --with-http_stub_status_module  --with-stream  

7)编译,启动2个进程去编译,这样速度快

make -j 2

8)编译安装

make  install

9)修改PATH变量

echo  "PATH=$PATH:/usr/local/sc99/sbin" >>/root/.bashrc

10)firewalld and selinux #stop firewall和设置下次开机不启动firewalld

service firewalld stop
systemctl disable firewalld

11)临时停止selinux和永久停止selinux

setenforce 0
sed  -i '/^SELINUX=/ s/enforcing/disabled/' /etc/selinux/config

12)开机启动

chmod +x /etc/rc.d/rc.local
echo  "/usr/local/sc99/sbin/nginx" >>/etc/rc.local

13)修改nginx.conf的配置,例如:端口号,worker进程数,线程数,服务域名

sed  -i '/worker_processes/ s/1/2/' /usr/local/sc99/conf/nginx.conf
sed  -i  '/worker_connections/ s/1024/2048/' /usr/local/sc99/conf/nginx.conf

14)启动nginx

/usr/local/sc99/sbin/nginx
nginx  -s stop  停止服务
nginx   -s  reload  重启服务
nginx  启动服务

15)浏览器访问网址,检查nginx是否部署成功

Linux服务器部署vue项目到nginx_第1张图片


2、将vue项目打包

1)运行命令将vue项目进行打包

npm run build

打包可能会报错,如下图:
Linux服务器部署vue项目到nginx_第2张图片

解决方法:修改项目中package.json 如下图:

Linux服务器部署vue项目到nginx_第3张图片

然后再运行npm run build
Linux服务器部署vue项目到nginx_第4张图片

会产生一个dist目录
Linux服务器部署vue项目到nginx_第5张图片

2)将dist目录上传至Linux下的/sc

Linux服务器部署vue项目到nginx_第6张图片

3、修改nginx配置文件

1)修改nginx配置文件,使其加载vue项目

cd /usr/locol/sc99/conf
vim nginx.conf

Linux服务器部署vue项目到nginx_第7张图片

2)重启nginx服务

nginx -s reload

3)查看nginx服务是否启动

ps aux |grep nginx

请添加图片描述

4、浏览器访问网址,部署成功

Linux服务器部署vue项目到nginx_第8张图片
.

你可能感兴趣的:(linux,服务器,vue,nginx,javascript)