1、vue打包
个人博客页面大概的架子已经搭起来了,打包部署到centos服务器看一下效果。
module.exports = {
publicPath: './', // 设置打包文件相对路径 (默认是没有“ . ”的,打包后路径不对,打开网页空白。需要加上 .)
devServer: {
// open: true, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://www.XXXXXXXX.com:8089/api/', //node接口部署的地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
2、nginx安装
1、yum安装
yum install nginx
2、进入目录
cd /etc/nginx
3、启动Nginx
service nginx start
4、测试是否安装成功
打开服务器网址首页
Welcome to CentOS
The Community ENTerprise Operating System
nginx安装成功
5、用Xftp6下载nginx.conf文件到本地进行修改
或者直接在liunx环境下修改
cd /root
cd /etc
cd nginx
vim nginx.conf
insert
修改完成后 wq! 保存退出
3、用Xftp6 上传打包后的dist文件到 /root/目录并重命名 blogweb
完整路径: /root/blogweb
4、上传node服务代码
完整路径: /root/blogservice
5、nginx.conf 配置
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
# 默认 user nginx 需要修改为root(登录服务器的账号)要不然没权限
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
# 7/5
upstream blog {
server 127.0.0.1:3002;
}
upstream course {
server 127.0.0.1:3001;
}
#7/5
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# 博客主页
server {
# 博客运行的端口号
listen 9527;
# 域名或者ip
server_name 域名;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /root/blogweb; # 前面上传打包后的dist文件
}
location /api {
proxy_pass http://blog; # 反向代理地址
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
#博客接口
server {
listen 8089;
server_name 域名;
client_max_body_size 500m;
location / {
proxy_pass http://blog;
proxy_read_timeout 300;
index index.html index.htm;
}
# 正则来匹配一些图片文件,
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|avi|mov|rmvb|rm|FLV|mp4|3GP)$
{
root /root/blogservice;
if (-f $request_filename) {
expires 1d;
break;
}
}
}
#其他接口
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
6、重启pm2 和 nginx
pm2 restart all
nginx -s reload