在内网环境用Apache+Nginx部署Django+VUE前后端分离项目

项目背景

接到一个在线考试系统的项目需求，时间紧，任务重，当然是先上github上搜现成项目，找到一个前端用vue后端用django的项目非常巴适，于是紧忙部署，因为从未接触过vue，期间走了很多弯路，在这里记录一下。

vue环境部署

因为是内网环境，不能连接互联网，部署起来相对复杂。思路就是先在外网环境搭建好，然后整个移植到内网环境。

• 首先是内网安装Node。Win7系统最高支持的是13.14版本。想安装14版本怎么办？首先官网下载13.14msi安装包正常安装，然后下载14.15.3压缩包zip版本，将压缩包内所有内容覆盖Node安装路径下的所有内容，然后在系统变量中添加无视平台审查的的变量 NODE_SKIP_PLATFORM_CHECK=1，
  至此安装完成。
• 然后是外围搭建Vue环境。
• VUE项目路径安装项目依赖

npm install 

• 测试运行

npm run serve

• 至此，在 C:\Users\Admanistrator 路径下 会有 .vue-templates文件夹。在该路径下的AppData\Roaming文件夹里有npm和npm-cache这两个文件夹。
• 然后是外网项目移植到内网。
• 首先查看内网Node的安装目录

npm config get prefix 查看npm全局安装包保存路径
npm config get cache 查看npm装包缓存路径
# 如果和外网环境不同，修改路径
npm config set prefix "C:/Users/root/AppData/Roaming/npm"
npm config set cache "C:/Users/root/AppData/Roaming/npm-cache"

• 然后把外网的三个文件夹复制到内网相同路径
• 这时把外网项目复制到内网，在内网 npm run serve就可以跑起来了。

Django部署到Apache

之前记录过,在这里开发的80端口

Django部署到Apache项目踩过的一些坑

Vue部署到Nginx

• 首先下载nginx稳定版本
• vue项目打包生成dist静态文件夹。这里要注意，修改vue.config.js

module.exports = {
	publicPath:'./',
	outputDir:'dist',
	assetsDir:'static',
	devServer: {
		proxy: {
			'/api': {
				//后端地址
				target: 'http://18.25.1.43:80',
				changeOrigin: true,
				pathRewrite: {
					//替换api关键变量
					'^/api': '/'
				}
			}
		}
	}
}

• router的index.js其中

const router = new VueRouter({
	mode: 'history',  //history模式路由中带#号，hash模式有#号
	base: process.env.BASE_URL,
	routes
})

• 将dist文件夹复制到nginx目录下的html中，修改nginx.conf文件
  server部分

server {
          
            
        listen       8088; #前端访问时需要的端口
        server_name  localhost;#前端访问时需要的ip，默认127.0.0.1或localhost

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist; # 打包的文件存放路径
            index  index.html index.htm;
             #try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
             #try_files $uri $uri/ /index.html; ---解决页面刷新404问题
        }
        #location ^~/api { 
        #     proxy_set_header Host $host;
        #     proxy_set_header X-Real-IP $remote_addr; 
        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        #     proxy_buffering off;
        #     rewrite ^/api/(.*)$ /$1 break; 
        #     proxy_pass http://xxxxx:8080; 后端接口地址
        #}
        #location /api/ {
            #proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header Host  $http_host;
            #proxy_set_header X-Nginx-Proxy true;
            #proxy_set_header Connection "";
            #proxy_pass http://xxxxx:8080;  #****后端接口地址
            #proxy_redirect default ;
        #}
        location ^~/api { 
            rewrite ^/api/(.*)$ /$1 break; #重置api
            proxy_pass http://18.25.1.43:80;  #后端接口地址
        }

到这里，Apache跑django后端，Nginx跑VUE前端没毛病了。

记录下常用命令

httpd.exe -k install -n exam
httpd.exe -k uninstall -n exam

sc.exe delete "ams"   #删除

nginx -s reload   #尽量在命令行中重启nginx服务
netstat -ano | findstr "80"   #查找端口占用