环境部署

准备工作

.Net >= 5.0 
MySql >= 5.7.0
SqlServer >= 2008(推荐2012以上)
Node >= 10

!> 前端安装完node后，最好设置下淘宝镜像源，不建议使用cnpm(可能会出现奇怪的问题)

npm install --registry=https://registry.npm.taobao.org

运行系统

前往 Gitee 下载页面(https://gitee.com/izory/ZrAdminNetCore) 下载本项目

后端运行

创建数据库 zrAdmin 将项目根目录下面的document文件夹下的选择对应的数据库类型脚本admin-xxxx.sql并导入数据脚本
修改appsettings.json配置文件中的conn_zrAdmin数据库连接字符串以及 - conn_zrAdmin_Type选择对应的数据库类型，目前仅支持MySQL、SQL server
打开项目运行F5 ，出现如下图表示启动成功。
通过项目根目录中的startup.bat启动

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:8888
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
10-11 17:51:31 | INFO | Microsoft.Hosting.Lifetime |  |  | Now listening on: http://localhost:8888
info10-11 17:51:31 | INFO | Microsoft.Hosting.Lifetime |  |  | Application started. Press Ctrl+C to shut down.
10-11 17:51:31 | INFO | Microsoft.Hosting.Lifetime |  |  | Hosting environment: Stage
10-11 17:51:31 | INFO | Microsoft.Hosting.Lifetime |  |  | Content root path: F:\ZRAdmin.NET\ZR.Admin.WebApi

!> 后端运行成功可以通过(http://localhost:8888) 访问，但是不会出现静态页面，可以继续参考下面步骤部署前端，然后通过前端地址来访问。

前端运行

# 进入项目目录
cd ZR.Vue

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

打开浏览器，输入：(http://localhost:8887 ) 默认账户/密码 admin/123456）若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

必要配置

修改数据库连接编辑ZR.Admin.WebApi目录下的appsettings.json 配置

{
  "ConnectionStrings": {
    "conn_zrAdmin": "server=127.0.0.1;user=zr;pwd=abc123;database=zrAdmin", //修改成你的数据库连接字符串
  },
  "conn_zrAdmin_type": 0, //选择对应的数据库类型MySql = 0, SqlServer = 1
}

跨域配置

{
  "sysConfig": {
    "tokenExpire": 1440, //Jwt token超时时间（分）
    "cors": "http://localhost:8887" //跨域地址，配置前端启动地址多个用","隔开
  }
}

部署系统

后端部署

发布WebApi项目文件 vs打开项目后右键 ZR.Admin.WebApi 选择发布即可，将发布后的文件拷贝到服务器上

前端部署

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。

通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。

环境变量

所有测试环境或者正式环境变量的配置都在 .env.development等 .env.xxxx文件中。

它们都会通过 webpack.DefinePlugin 插件注入到全局。

!> 环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE
你在代码中可以通过如下方式获取:
console.log(process.env.VUE_APP_xxxx)

Nginx配置

创建文件 zradmin.ini 添加以下内容

server {
	#修改要监听的端口
  listen 8080;
	#修改要绑定的域名或IP地址
  server_name localhost;

  # charset koi8-r;
  access_log  logs/logs.access.log  main;

	# 后端接口 生产环境
	location /prod-api/ {
		proxy_pass  http://localhost:8888/;
       
		# 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		# 如果请求被负载均衡的服务器返回类似500这样的，将继续请求下一台应用服务器，默认 对post,lock,patch的请求不进行重试，如果要设置在后面添加 non_idemponent
		#	proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    }
	
	# vue项目配置
	location / {
		#将xxxxx路径改成你的发布路径
		root html/zradmin_vue;
		index index.html;
		try_files $uri $uri/ /index.html;
	}
	
    error_page 404              /404.html;

    # redirect server error pages to the static page /50x.html
    error_page 500 502 503 504  /50x.html;
    location = /50x.html {
        root html;
    }
}

在nginx安装目录中的html目录中创建文件夹zradmin_vue
将ZR.Vue项目的dist文件中的文件拷贝到刚刚创建的zradmin_vue中
浏览器中访问 http://localhost:8080

!> 服务器防火墙的设置开放8080 端口

5.0 KiB Raw Blame History Unescape Escape