|
|
@@ -118,6 +118,81 @@ litemall是一个简单的商场系统,基于现有的开源项目,重新实
|
|
|
注意:
|
|
|
> 以上特点并不一定是优点。
|
|
|
|
|
|
+接下来,从项目的开发、部署(测试)和上线三个阶段介绍litemall。
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+首先需要明确的是三个不同阶段:
|
|
|
+
|
|
|
+* dev
|
|
|
+
|
|
|
+即develop或者development, 这里指开发阶段,通常代码是直接在本地编译、运行和测试。
|
|
|
+此外,这里服务访问地址通常是localhost。这里的“用户”主要是指开发者本身。
|
|
|
+
|
|
|
+* dep
|
|
|
+
|
|
|
+即deploy或者deployment,这里指部署(测试阶段),通常代码已经编译打包运行在远程主机中,
|
|
|
+可以对外服务。此外,这里服务访问地址通常是IP地址。如果IP是公网IP,那么
|
|
|
+部署以后就可以对外服务;如果是内网地址,那么只能内网访问。这里的“用户”主要是
|
|
|
+指开发者本身、测试者;当然,如果是局域网或者不介意IP访问的,那么这里的“用户”
|
|
|
+也可能是最终使用者用户。
|
|
|
+
|
|
|
+* prod
|
|
|
+
|
|
|
+即product或者production,这里指上线阶段,通常也是代码编译打包运行在远处主机中可以对外服务。
|
|
|
+此外,这里服务访问地址通常是域名地址,同时端口是80web端口。上线以后直接面向的是最终用户。
|
|
|
+虽然服务的代码本身和dep是完全一样的,但是考虑到场景的不同,上线阶段可能在运行环境方面需要做
|
|
|
+调整,例如采用反向代理屏蔽内部实际项目结构。此外,最大的不同应该是上线环境下要使用域名和80端口,
|
|
|
+而部署阶段则更为自由。
|
|
|
+
|
|
|
+其次,需要明确的是,这里划分三种阶段不是简单的文档说明,还直接影响项目本身的行为
|
|
|
+和代码编译结果,因此开发者需要清晰的了解:
|
|
|
+
|
|
|
+* dev
|
|
|
+ 项目的各个模块采用dev来编译配置代码行为。
|
|
|
+ * vue技术栈的模块采用dev配置文件编译,见litemall-admin/config/dev.env.js
|
|
|
+ * 小程序技术栈的模块采用dev配置,见litemall-wx/config/api.js
|
|
|
+ * spring boot技术栈的模块采用dev配置,例如见litemall-wx-api/src/main/resources/application-dev.properties,
|
|
|
+ 此外,在代码中也可以采用`Profile(dev)`来直接定义代码在dev阶段的行为。
|
|
|
+
|
|
|
+* dep
|
|
|
+ 项目的各个模块采用dep来编译配置代码行为。
|
|
|
+ * vue技术栈的模块采用dep配置文件编译,见litemall-admin/config/dep.env.js
|
|
|
+ * 小程序技术栈的模块采用dep配置,见litemall-wx/config/api.js
|
|
|
+ * spring boot技术栈的模块采用dep配置,例如见litemall-wx-api/src/main/resources/application-dep.properties,
|
|
|
+ 此外,在代码中也可以采用`Profile(dep)`来直接定义代码在dev阶段的行为。
|
|
|
+
|
|
|
+* prod
|
|
|
+ 项目的各个模块采用prod来编译配置代码行为。
|
|
|
+ * vue技术栈的模块采用prod配置文件编译,见litemall-admin/config/prod.env.js
|
|
|
+ * 小程序技术栈的模块采用prod配置,见litemall-wx/config/api.js
|
|
|
+ * spring boot技术栈的模块采用prod配置,例如见litemall-wx-api/src/main/resources/application-prod.properties,
|
|
|
+ 此外,在代码中也可以采用`Profile(prod)`来直接定义代码在dev阶段的行为。
|
|
|
+
|
|
|
+最后,其实dep和prod不存在先后关系。例如,如果开发者已经存在域名和生产环境,可以直接
|
|
|
+跳过dep阶段,而直接部署在线上环境中。因此有些时候,这里部署和上线是一个阶段。
|
|
|
+当然,这里仍然建议先dep后prod,是因为对于第一次开发而言,先dep阶段可以避免对域名、https证书等非业务相关工作的干扰。
|
|
|
+此外,有些业务功能(例如微信支付)必须是域名访问,那么开发和部署阶段可以先采用模拟或跳过的形式,
|
|
|
+先不开发和测试这样业务功能,等其他功能开发完毕和部署测试成功以后,再来开发这些线上环境才能
|
|
|
+运行的功能,此时会有一个好的基础。
|
|
|
+
|
|
|
+注意:
|
|
|
+> 以上三种阶段是基于个人理解,有可能有误或不当的地方。
|
|
|
+> 此外,可能有人会认为需要存在测试阶段置于dev和dep之间。
|
|
|
+> 但是,本人认为测试过程存在于三个不同阶段内部可能更为适宜,
|
|
|
+> 即项目测试过程这里不会作为独立的一个阶段。
|
|
|
+
|
|
|
+讨论:
|
|
|
+> 对于内网IP,例如"192.168.0.1",是应该认为属于开发阶段的配置,还是应该认为属于部署阶段的配置?
|
|
|
+> 本人认为,这里可能不一定,看开发者的实际需要,不过更倾向于开发阶段。
|
|
|
+>
|
|
|
+> 场景1,开发者本机是"192.168.0.1",那么此时litemall-wx模块的api.js中,如果采用localhost,那么
|
|
|
+> 本机的微信开发者工具可以访问,但是局域网内手机测试则不能访问;而如果采用本机的IP地址,那么
|
|
|
+> 本机微信开发者工具可以访问,同时局域网内手机测试也能访问。此时,设置IP地址应该属于开发阶段。
|
|
|
+>
|
|
|
+> 场景2,局域网内管理后台代码部署到局域网服务器中,用户基于局域网的内网IP来访问管理平台,
|
|
|
+> 此时,设置IP地址应该属于部署阶段(甚至可以认为是“上线阶段”)。
|
|
|
+
|
|
|
## 1.4 开发方案
|
|
|
|
|
|

|
|
|
@@ -138,18 +213,23 @@ litemall是一个简单的商场系统,基于现有的开源项目,重新实
|
|
|
1. 本项目目前采用MySQL,请上网下载安装MySQL 5.7.x
|
|
|
|
|
|
注意:
|
|
|
- > 目前发现一个问题是,MySQL必须安装5.7.x, 如果是5.6或者最新的8.0都会存在错误。
|
|
|
- > 目前原因还没有找到(可能是采用JSON引起),希望开发者注意或者有好的解决方案。
|
|
|
+ > 1. MySQL必须安装5.7.x, 如果是5.6或者最新的8.0都会存在错误。
|
|
|
+ > 目前原因还没有找到(可能是采用JSON引起),希望开发者注意或者有好的解决方案。
|
|
|
+ > 2. 如果采用IDE工具导入数据,建议采用MySQL Workbench。如果采用navicat可能有时导入失败。
|
|
|
+ > 这里失败的原因应该是sql文件是MySQL Workbench导出的,因此可能存在不兼容的格式。
|
|
|
|
|
|
2. 数据库文件存放在litemall-db/sql文件夹中,其中litemall_schema.sql创建数据库和用户权限,
|
|
|
而litemall.sql则是具体的表和数据。开发者可以采用命令或者软件导入数据。
|
|
|
+
|
|
|
+ 注意:
|
|
|
+ > 不要运行nideshop.sql文件,这只是所参考nideshop项目的原始数据库,仅用于对比。
|
|
|
|
|
|
### 1.4.1 Spring Boot开发环境
|
|
|
|
|
|
1. 安装JDK8
|
|
|
2. 安装Maven
|
|
|
3. 安装Git(可选)
|
|
|
-4. 安装IDEA Community,建议安装Maven插件和git插件
|
|
|
+4. 安装IDEA Community,建议安装Maven插件和git插件。Eclipse没有试过,但是应该也是可行的。
|
|
|
5. IDEA导入本项目
|
|
|
6. 采用Maven命令安装依赖库
|
|
|
|
|
|
@@ -470,16 +550,30 @@ source ./litemall-db/litemall.sql
|
|
|
```
|
|
|
其中123456是开发者所设置的MySQL的管理员密码。
|
|
|
|
|
|
-#### 1.5.3.5 Tomcat
|
|
|
+#### 1.5.3.5 Tomcat/Nginx
|
|
|
+
|
|
|
+本项目中采用二进制jar包方式来部署Spring Boot后端应用,因此可以不需要部署在tomcat中。
|
|
|
+但是,litemall-admin前端项目最终会编译出静态文件,需要部署在服务器中,
|
|
|
+因此这里需要安装tomcat或者nginx(或者其他服务器)。
|
|
|
|
|
|
-1. 本项目中采用二进制jar包方式来部署Spring Boot后端应用,因此可以不需要部署在tomcat中。
|
|
|
-但是,litemall-admin前端项目最终会编译出静态文件,需要部署在服务器中,因此这里仍需安装tomcat(或者其他服务器)。
|
|
|
+这里可能有点绕:
|
|
|
+1. 开发方案,无需tomcat/nginx,直接用VSC即可;
|
|
|
+2. 部署方案,采用tomcat,这里是因为80端口可能需要云主机备案;
|
|
|
+3. 上线方案. 采用nginx,通过反向代理访问后台服务。
|
|
|
+
|
|
|
+因此目前这里采用tomcat部署静态文件,通过8080端口访问管理后台。
|
|
|
+当然,这里没有严格限制,开发者也可以直接配置好nginx,在部署方案就使用nginx来
|
|
|
+部署静态文件服务,通过80web端口访问管理后台。
|
|
|
+
|
|
|
+
|
|
|
+* Tomcat部署静态文件
|
|
|
|
|
|
+ 1. 安装tomcat
|
|
|
```bash
|
|
|
sudo apt-get install tomcat8
|
|
|
```
|
|
|
|
|
|
-2. 为了配置tomcat支持外部文件夹中,修改tomcat的server文件的`Host`标签
|
|
|
+ 2. 配置tomcat指向`delpoy/litemall-admin/dist`目录
|
|
|
|
|
|
```bash
|
|
|
sudo vi /var/lib/tomcat8/conf/server.xml
|
|
|
@@ -493,14 +587,35 @@ source ./litemall-db/litemall.sql
|
|
|
</Host>
|
|
|
```
|
|
|
|
|
|
-3. 重启tomcat
|
|
|
+ 3. 运行/重启tomcat
|
|
|
|
|
|
```
|
|
|
+ sudo service tomcat8 stop
|
|
|
+ sudo service tomcat8 start
|
|
|
sudo service tomcat8 restart
|
|
|
```
|
|
|
|
|
|
+* Nginx部署静态文件
|
|
|
|
|
|
-#### 1.5.3.5 项目打包
|
|
|
+ 这里可以参考http://www.nginx.cn/4723.html
|
|
|
+
|
|
|
+ 1. 安装nginx
|
|
|
+
|
|
|
+ ```bash
|
|
|
+ sudo apt-get update
|
|
|
+ sudo apt-get install nginx
|
|
|
+ ```
|
|
|
+
|
|
|
+ 2. 配置nginx指向`delpoy/litemall-admin/dist`目录
|
|
|
+
|
|
|
+ 3. 运行/重启nginx
|
|
|
+ ```
|
|
|
+ sudo service nginx stop
|
|
|
+ sudo service nginx start
|
|
|
+ sudo service nginx restart
|
|
|
+ ```
|
|
|
+
|
|
|
+#### 1.5.3.6 项目打包
|
|
|
|
|
|
1. Spring Boot打包
|
|
|
|
|
|
@@ -533,7 +648,7 @@ cnpm run build:prod
|
|
|
|
|
|
此时,litemall-admin模块的dist文件夹中就是最终部署时的代码,可以先压缩,上传到云主机,再解压缩。
|
|
|
|
|
|
-#### 1.5.3.6 项目部署运行
|
|
|
+#### 1.5.3.7 项目部署运行
|
|
|
|
|
|
https://docs.spring.io/spring-boot/docs/1.5.10.RELEASE/reference/htmlsingle/#deployment-service
|
|
|
|
|
|
@@ -635,4 +750,238 @@ https://docs.spring.io/spring-boot/docs/1.5.10.RELEASE/reference/htmlsingle/#dep
|
|
|
|
|
|
注意:
|
|
|
> 虽然这里介绍了这种方案,但是本项目的开发、测试和部署是基于1.5.3方案,
|
|
|
-> 因此开发者可能需要做一些配置方面的调整,例如三个后台服务地址调整。
|
|
|
+> 因此开发者可能需要做一些配置方面的调整,例如三个后台服务地址调整。
|
|
|
+
|
|
|
+
|
|
|
+## 1.6 上线方案
|
|
|
+
|
|
|
+在1.5节部署方案中,我们介绍了多种部署的方案,但是实际上这些方案都不能直接用于正式环境:
|
|
|
+1. 正式环境需要域名和HTTPS证书
|
|
|
+2. 小商场的小程序端对服务器域名存在接入要求。
|
|
|
+
|
|
|
+本节采用`www.example.com`域名作为示例。
|
|
|
+
|
|
|
+注意
|
|
|
+> `www.example.com`仅作为实例,不是真实环境下的域名。
|
|
|
+
|
|
|
+这里列举一种可行的单机上线方案,开发者可以基于自身业务采用其他上线方案。
|
|
|
+
|
|
|
+### 1.6.1 域名
|
|
|
+
|
|
|
+1. 注册域名,通常商业性的网站采用`.com`
|
|
|
+2. 解析域名到服务器公网IP,采用`ping`命令查看是否解析成功
|
|
|
+3. 备案
|
|
|
+
|
|
|
+### 1.6.2 nginx
|
|
|
+
|
|
|
+https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-16-04
|
|
|
+
|
|
|
+在部署方案中建议安装了tomcat来访问管理后台,而这里上线方案中则建议使用nginx,
|
|
|
+此时我们可以卸载tomcat(当然不卸载也可以,即同时支持8080端口访问)。
|
|
|
+
|
|
|
+#### 1.6.2.1 nginx安装
|
|
|
+
|
|
|
+采用命令
|
|
|
+```bash
|
|
|
+sudo apt-get update
|
|
|
+sudo apt-get install nginx
|
|
|
+```
|
|
|
+
|
|
|
+有的文档会指出需要防火墙设置,但是腾讯云主机防火墙默认没有开启。
|
|
|
+开发者这里自己可以开启设置,或者直接不开启。
|
|
|
+
|
|
|
+打开浏览器,输入以下地址:
|
|
|
+```
|
|
|
+http://www.example.com
|
|
|
+```
|
|
|
+
|
|
|
+此时,如果看到nginx的欢迎页面,则安装成功。
|
|
|
+
|
|
|
+安装以后:
|
|
|
+* `/var/www/html`:默认静态web文件目录
|
|
|
+* `/etc/nginx`:
|
|
|
+* `/etc/nginx/nginx.conf`:
|
|
|
+* `/etc/nginx/sites-avaiable`:
|
|
|
+* `/etc/nginx/sites-enabled`:
|
|
|
+* `/etc/nginx/snippets`:
|
|
|
+* `/var/log/nginx/access.log`:
|
|
|
+* `/var/log/nginx/error.log`:
|
|
|
+
|
|
|
+#### 1.6.2.2 https
|
|
|
+
|
|
|
+1. 申请证书
|
|
|
+
|
|
|
+ 可以参考[腾讯云 域名型证书申请流程](https://cloud.tencent.com/document/product/400/6814)
|
|
|
+
|
|
|
+2. 下载证书
|
|
|
+
|
|
|
+ 这里使用nginx文件夹下面的密钥文件,例如`1_www.example.com_bundle.crt`和`2_www.example.com.key`
|
|
|
+
|
|
|
+3. 部署证书到nginx
|
|
|
+
|
|
|
+ 可以参考[腾讯云 证书安装指引](https://cloud.tencent.com/document/product/400/4143)
|
|
|
+ 把两个密钥文件保存的`/etc/nginx`文件夹,然后修改`/etc/nginx/nginx.conf`文件:
|
|
|
+ ```
|
|
|
+ server {
|
|
|
+ listen 443;
|
|
|
+ server_name www.example.com;
|
|
|
+ ssl on;
|
|
|
+ ssl_certificate /etc/nginx/1_www.example.com_bundle.crt;
|
|
|
+ ssl_certificate_key /etc/nginx/2_www.example.com.key;
|
|
|
+ ssl_session_timeout 5m;
|
|
|
+ ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
|
|
|
+ ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
|
|
|
+ ssl_prefer_server_ciphers on;
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+4. 重启nginx
|
|
|
+
|
|
|
+打开浏览器,输入以下地址:
|
|
|
+```
|
|
|
+https://www.example.com
|
|
|
+```
|
|
|
+
|
|
|
+此时,可以看到https协议的nginx欢迎页面。
|
|
|
+
|
|
|
+#### 1.6.2.3 litemall-admin静态文件
|
|
|
+
|
|
|
+修改`/etc/nginx/nginx.conf`文件,配置nginx静态web文件目录
|
|
|
+```
|
|
|
+server {
|
|
|
+ location / {
|
|
|
+ root /home/ubuntu/deploy/litemall-admin/dist;
|
|
|
+ index index.html index.htm;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+打开浏览器,输入以下地址:
|
|
|
+```
|
|
|
+https://www.example.com
|
|
|
+```
|
|
|
+
|
|
|
+此时,可以看到管理后台的页面。
|
|
|
+
|
|
|
+#### 1.6.2.3 反向代理三个后台服务
|
|
|
+
|
|
|
+继续修改`/etc/nginx/nginx.conf`文件,配置nginx静态web文件目录
|
|
|
+```
|
|
|
+server {
|
|
|
+ location ^~ /os {
|
|
|
+ proxy_pass http://localhost:8081;
|
|
|
+ proxy_set_header Host $host;
|
|
|
+ proxy_set_header X-Real-IP $remote_addr;
|
|
|
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
+ }
|
|
|
+
|
|
|
+ location ^~ /wx {
|
|
|
+ proxy_pass http://localhost:8082;
|
|
|
+ proxy_set_header Host $host;
|
|
|
+ proxy_set_header X-Real-IP $remote_addr;
|
|
|
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
+ }
|
|
|
+
|
|
|
+ location ^~ /admin {
|
|
|
+ proxy_pass http://localhost:8083;
|
|
|
+ proxy_set_header Host $host;
|
|
|
+ proxy_set_header X-Real-IP $remote_addr;
|
|
|
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+打开浏览器,输入以下地址:
|
|
|
+```
|
|
|
+https://www.example.com/os/index/index
|
|
|
+https://www.example.com/wx/index/index
|
|
|
+https://www.example.com/admin/index/index
|
|
|
+```
|
|
|
+
|
|
|
+此时,看到后台数据说明反向代理配置成功。
|
|
|
+
|
|
|
+#### 1.6.2.4 全站加密
|
|
|
+
|
|
|
+服务器自动把http的请求重定向到https
|
|
|
+
|
|
|
+```
|
|
|
+server {
|
|
|
+ listen 80;
|
|
|
+ server_name www.example.com;
|
|
|
+ rewrite https://$server_name$request_uri? permanent;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+打开浏览器,输入以下地址:
|
|
|
+```
|
|
|
+http://www.example.com
|
|
|
+```
|
|
|
+
|
|
|
+总结,经过以上不同方面的配置,nginx这里最终的配置是如下:
|
|
|
+1. 证书`1_www.example.com_bundle.crt`和`2_www.example.com.key`放置在
|
|
|
+ `/etc/nginx/`文件夹内。
|
|
|
+2. 把`/etc/nginx/nginx.conf`文件进行修改,具体可以参考[本项目的nginx.conf](./pic/nginx.conf)
|
|
|
+3. 重启nginx
|
|
|
+
|
|
|
+注意:
|
|
|
+> 本人对nginx也不了解,仅仅依靠网络知识配置了简单的效果。
|
|
|
+> 更多配置方法和功能,请开发者自行学习。
|
|
|
+
|
|
|
+### 1.6.3 小商场的小程序端上线
|
|
|
+
|
|
|
+这里参考小程序官方文档,上线自己的小商城。
|
|
|
+
|
|
|
+上线之前需要修改代码或者配置文件:
|
|
|
+1. litemall-wx-api模块的WxOrderController类的payNotify方法的链接换成合适的地址。
|
|
|
+
|
|
|
+ 注意:
|
|
|
+ > 换成什么地址都可以,但是这里不应该暴露出来。也就是说这个地址是微信支付平台
|
|
|
+ > 和这里的小商场后台服务之间的交互API,对外公开会存在安全隐患。
|
|
|
+
|
|
|
+2. litemall-wx-api模块需要配置prod.properties
|
|
|
+
|
|
|
+ ```
|
|
|
+ wx.app-id=
|
|
|
+ wx.app-secret=
|
|
|
+ wx.mch-id=
|
|
|
+ wx.mch-key=
|
|
|
+ wx.notify-url=
|
|
|
+ ```
|
|
|
+
|
|
|
+ 这里的`wx.notify-url`就是前面开发者自定义的地址。
|
|
|
+
|
|
|
+3. litemall-wx模块的`project.config.json`文件调整相应的值,
|
|
|
+ 特别是`appid`要设置成开发者申请的appid。
|
|
|
+
|
|
|
+
|
|
|
+### 1.6.4 上线脚本
|
|
|
+
|
|
|
+### 1.6.5 优化
|
|
|
+
|
|
|
+以下是部署方案中出现而在上线方案中可以优化的一些步骤。
|
|
|
+
|
|
|
+#### 1.6.5.1 卸载tomcat
|
|
|
+
|
|
|
+如果部署方案中采用tomcat而8080端口访问后台,而这里配置nginx后,
|
|
|
+可以直接采用80端口访问,因此tomcat可以卸载。
|
|
|
+
|
|
|
+#### 1.6.5.2 静态文件托管CDN
|
|
|
+
|
|
|
+在上节中,建议采用卸载tomcat,采用nginx托管管理后台的静态文件。
|
|
|
+这里可以进一步地,把静态文件托管到CDN,当然这里是需要收费。
|
|
|
+
|
|
|
+#### 1.6.5.3 后台服务内部访问
|
|
|
+
|
|
|
+原来后台服务可以通过域名或者IP直接对外服务,而这里采用nginx反向代理后可以
|
|
|
+通过80端口访问后台服务。因此,会存在这样一种结果:
|
|
|
+* 用户可以https协议的80端口访问后台服务(nginx反向代理)
|
|
|
+* 用户也可以通过http协议的8081、8082、8083访问后台服务(spring boot)
|
|
|
+由于http不是安全的,这里可能存在安全隐患
|
|
|
+
|
|
|
+而如果取消后台服务的对外访问,这样可以保证用户只能采用安全的https协议访问后台服务。
|
|
|
+同时,对外也能屏蔽内部具体技术架构细节。
|
|
|
+
|
|
|
+#### 1.6.5.4 nginx优化
|
|
|
+
|
|
|
+本人对nginx不是很熟悉,而nginx还存在很多可以调整优化的部分,这里建议开发者
|
|
|
+根据自己业务或架构情况优化。
|