Vue项目打包部署到服务器(Linux)
一、打包(build)
npm run build / yarn build
打包完成后项目路径会多出一个dist文件夹
到这里本地的打包完成了
然后到服务器
二、服务器配置(nginx)
**注:如果已经有nginx环境了的话直接到第6小步**
1、查看gcc版本 gcc -v
没有的话安装
yum -y install gcc
2、pcre、pcre-devel安装
pcre是一个perl库,包括perl兼容的正则表达式库,nginx的http模块使用pcre来解析正则表达式,所以需要安装pcre库。
yum install -y pcre pcre-devel
3、zlib安装zlib库提供了很多种压缩和解压缩方式nginx使用zlib对http包的内容进行gzip,所以需要安装
yum install -y zlib zlib-devel
4、安装opensslopenssl是web安全通信的基石,如果没有openssl,我们的信息可以说都是在裸奔。。。。。。
安装命令:
yum install -y openssl openssl-devel
5、安装nginx
去到一个文件夹cd /usr/local/web
a、下载nginxwget http://nginx.org/download/nginx-1.9.9.tar.gz
b、解压压缩包tar -zxvf nginx-1.9.9.tar.gz
c、切换到cd /usr/local/web/nginx-1.9.9/下面执行三个命令:
1. ./configure
2. make
3. make install
Nginx安装成功
如果已经安装了的可以直接从第6步(这一步)开始
6、切换到nginx安装目录(默认是/usr/local/nginx)
可以执行where nginx查看
修改nginx文件夹里的nginx.conf修改默认配置,
默认配置已经够用了基本只需要修改一下端口和路径,
默认端口是80,一般都是已经被占用了的,改成其它自己需要的
然后路径是刚刚打包的dist文件的路径
最基础的配置(如果已经有其他项目在nginx里了也可以直接在http{里面再加上这一段})
server {
listen 8080;
server_name project1;
location / {
root edu/dist; #dist路径
index index.html index.htm;
}
}
7、启动nginx服务切换目录到/usr/local/nginx/sbin下面
执行./nginx
启动
其它nginx命令
./nginx -s stop #停止
./nginx -s quit #比较安全的退出
./nginx -s reload #刷新重启
8、查看nginx服务是否启动成功
ps -ef | grep nginx
然后开放端口(开放端口的操作这里就略啦——云服务器的去对应平台设置安全组里添加)
不出意外的话执行你的ip或者域名:10.0.xx.xx:8080就可以访问到你的项目了
接下来则可以开始进入CICD的进阶方式;实现持续部署
更多推荐
所有评论(0)