1 打包vue项目
npm run build
之后会生成一个dist文件夹。
2 配置nginx
worker_processes 1;
# 以上是全局模块
# worker_processes的值越大,Nginx并发能力越强
events {
worker_connections 1024;
}
# worker_connections的值越大,Nginx并发能力越强
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/local/nginx/html/dist;
index index.html index.htm;
}
# location
# root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源
# index: 默认去上述路径中找到index.html或者index.htm
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
3 配置nginx.conf
压缩dist文件夹为dist.zip
将dist.zip上传到上面指定路径
/usr/local/nginx/html
安装unzip
yum install -y unzip zip
unzip dist.zip
删除dist.zip文件
rm -f dist.zip
浏览器访问服务器地址,因为配置的是80端口,所以默认不用加端口号
启动nginx,报错
nginx: [error] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)
【解决】
cd /var/run
mkdir nginx
创建nginx.pid文件
touch nginx.pid
再重新进入/usr/local/nginx/sbin,运行
cd /usr/local/nginx/sbin
./ngin
访问192.168.56.10,如下
至此,Nginx部署一个vue项目完毕!
如果需要https配置
解压nginx压缩包后,编译生成Makefile的命令需要配置支持ssl模块
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre
需要在conf/nginx.conf文件中加入ssl配置
整体配置文件如下:
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8844 ssl;
server_name localhost;
ssl_certificate ../cert/cert.crt;
ssl_certificate_key ../cert/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location /image/ {
alias /home/love_project/images/;
autoindex on;
}
location / {
root /usr/local/nginx/html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://124.223.118.207:9001/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
需要ssl加密的四个文件
ca.crt
cert.key
cert.crt
ca.key
把这四个文件放在nginx/cert文件夹中即可
重新启动项目,即可https访问