From 03ba46175f30865e2e3c1924221a494b2bf1c512 Mon Sep 17 00:00:00 2001
From: chendt <18902722133@163.com>
Date: Tue, 20 Sep 2022 10:03:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E7=BD=B2=E6=96=87=E6=A1=A3=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/生产环境/教你如何部署.md | 112 +++++++++++++++++++++++++++++++----
 1 file changed, 101 insertions(+), 11 deletions(-)

diff --git a/doc/生产环境/教你如何部署.md b/doc/生产环境/教你如何部署.md
index d6acc86..c6714c5 100644
--- a/doc/生产环境/教你如何部署.md
+++ b/doc/生产环境/教你如何部署.md
@@ -26,7 +26,7 @@ yum  install  java-1.8.0-openjdk   java-1.8.0-openjdk-devel
 
 4. 修改`yami-shop-api\src\main\resources\log4j2_prod.xml` 修改里面的`PROJECT_PATH` 将`/opt/projects/yami-shops` 改为自己生产环境的项目路径
 
-以上 1、2 工程目录为 `yami-shop-admin` 而 3、4、5 工程目录为 `yami-shop-api` 请注意区分
+以上 1、2 工程目录为 `yami-shop-admin` 而 3、4 工程目录为 `yami-shop-api` 请注意区分
 
 6. 修改完毕后打包，使用`mvn clean package -DskipTests`  命令进行打包，最终会生成很多的jar，我们需要其中两个。
 
@@ -64,22 +64,112 @@ tail -f ${PROJECT_PATH}/log/api.log
 
 ### 2.vue
 
-vue项目的打包构建相对比较简单，但是要注意跨域的问题，相关可以查阅《nginx安装与跨域配置》这篇文章。
+> mall4v：v代表vue项目，是后台管理员界面使用的前端项目，因为前后端分离的
+>
+> mall4uni：用户前端h5项目
+>
+> mall4m：小程序项目
 
-下面来说下步骤：
+下面以mall4v为主进行讲解
 
-1. 修改`static\config\index-prod.js` 将`baseUrl` 改为vue的请求地址(同源策略)，并携带`/apis`的路径，方便修改跨域的配置
-2. 使用 `npm run build` 命令对项目进行打包
-3. 将步骤2中生成的`dist` 文件夹中的文件，压缩，上传到服务器，解压
-4. 使用nginx指向上传解压好的目录
-5. 输入域名即可访问
+##### 1. 安装nodejs + 淘宝npm镜像
+
+如果不了解怎么安装nodejs的，可以参考   [菜鸟教程的nodejs相关](https://www.runoob.com/nodejs/nodejs-install-setup.html)
 
 
-> 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
+将npm的镜像源更改为淘宝的镜像源，回车（千万不要用cnpm，否则会出现不可预知的后果）：
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
 
 
-对于上面vue的请求地址，很多人不清楚是什么意思，比如我们线上的访问 `http://mall4j-admin.gz-yami.com` 这个是我们的商城后台（这个东西有两个特点：1. 可以用浏览器打开 2.这个是前端的路径），那么根据同源策略，前端只能请求前端的路径，也就是`http://mall4j-admin.gz-yami.com`，那该怎么办呢？
 
-我们`static\config\index-prod.js` 的`baseUrl`写成这个样子`http://mall4j-admin.gz-yami.com/apis`，这就会出现一个问题，明显看来这个请求的是前端呀，怎么访问服务器啊？答案就是nginx反向代理，将`/apis`指向我们后台启动的端口或域名就好了。相关可以查阅《nginx安装与跨域配置》这篇文章。
+##### 2. 安装依赖启动项目
+
+使用`vscode`打开vue项目，进入到该项目的根目录（根目录有`package.json` 的文件）
+
+使用npm安装依赖（请记得配好淘宝的镜像源，除非你能确定你的网络能够畅快访问外网，另外千万不要用cnpm），使用命令行输入，回车：
+
+```bash
+npm i
+```
+
+如果用淘宝镜像装不上的话，报错信息含有“要安装python”的相关信息，就删掉node_modules 切换回原镜像试试
+
+```bash
+npm config set registry https://registry.npmjs.org/
+```
+
+
+
+##### 3. 修改配置文件，连接后台
+
+修改 `.env.production`  连接后台，
+
+- `VUE_APP_BASE_API` ： `mall4v` 这个项目连接的是`admin.jar`提供的接口
+
+- `VUE_APP_RESOURCES_URL` : 静态资源文件对应的url，比如七牛云之类的
+
+```javascript
+# just a flag
+ENV = 'production'
+
+// api接口请求地址
+VUE_APP_BASE_API = 'https://mini-admin.mall4j.com/apis'
+
+// 静态资源文件url
+VUE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
+```
+
+
+
+如果你仔细查看我们默认的`.env.production`的设置的话，会看到我们的url后面加了`/apis`，实际上这是我们为了少创建几个子域名做的操作，如果你看到`《nginx安装与跨域配置》` 就能看出这里其实做了转发。
+
+其实如果创建的子域名足够多，也就不需要nginx进行转发了，此时直接填域名即可，无需再加`/apis` 两个后缀了。
+
+如下所示：
+
+```nginx
+    location /apis {
+		rewrite  ^/apis/(.*)$ /$1 break;
+		proxy_pass   http://127.0.0.1:8111;
+    }
+```
+
+
+
+##### 打包，上传到服务器
+
+1. 使用 `npm run build:prod` 命令对项目进行打包
+2. 将步骤1中生成的`dist` 文件夹中的文件，压缩，上传到服务器nginx指定好的目录(`/usr/share/nginx/admin` )，解压
+
+
+
+`mall4j-admin.conf`
+
+```nginx
+server {
+    listen       80;
+	server_name  mall4j-admin.gz-yami.com;
+    root         /usr/share/nginx/admin;
+
+    # Load configuration files for the default server block.
+    include /etc/nginx/default.d/*.conf;
+
+    location / {
+    }
+        
+	# 跨域配置
+	location /apis {
+		rewrite  ^/apis/(.*)$ /$1 break;
+		proxy_pass   http://127.0.0.1:8111;
+    }
+        
+}
+```
+
+用户端api接口的nginx配置文件参考《nginx安装与跨域配置》这篇文章，修改的配置文件路径`/mall4uni/utils/config.js`，同样打包上传到服务器，配置nginx即可
+