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是否部署成功

---

2、将vue项目打包

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

npm run build

打包可能会报错，如下图：

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

然后再运行npm run build

会产生一个dist目录

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

3、修改nginx配置文件

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

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

2)重启nginx服务

nginx -s reload

3)查看nginx服务是否启动

ps aux |grep nginx

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

.