# 部署 H5
文档最后更新时间:2021-06-17 15:52:19
### 开始之前
* 强烈建议不喜欢折腾的同学给`H5`前端单独部署一个站点,配置好域名,并且强烈建议配置好`https`
* 生成海报前,请先把 后台 -》 商城配置 -》商城信息-》分享设置,配置正确
### 后端
#### 创建站点,并且配置好 https
![](https://img.kancloud.cn/10/9b/109b7bb1b48202d2c7d69f768db86bee_636x503.png)
#### 前端的伪静态(使用history模式)
![](https://img.kancloud.cn/33/f9/33f980d7d5f40be04cec1489a0a027fc_686x254.png)
#### Nginx配置
~~~
location / {
try_files $uri $uri/ /index.html last;
index index.html;
}
~~~
**重启 Nginx!!!**
sSwNyTon0WkYd/tn6eNZJA==
#### Apache配置
~~~
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]
</IfModule>
~~~
### 前端
#### 前端H5配置
在manifest.json
![](https://img.kancloud.cn/12/61/12612244536663083c91d9c2ae6d647b_835x773.png)
#### 调试 H5
![](https://img.kancloud.cn/e0/a7/e0a779fd218fdc659a5993f15897cbbf_551x182.png)
#### 发布 H5
![](https://img.kancloud.cn/e3/34/e334651b5bf1d2fe69fc38a53d8bbc24_426x419.png)
* 填写 网站名称标题
![](https://img.kancloud.cn/04/61/04617008087e2a0b08785dbfedec0e1a_426x195.png)
* 打包成功
![](https://img.kancloud.cn/95/6d/956d7737381aef70008f78b0a65a477b_1200x455.png)
* 将两个文件上传到宝塔前端站点根目录,如图所示:
![](https://img.kancloud.cn/5b/8f/5b8f22575aae1be0fd513c2dd87a00ab_1200x278.png)
#### H5 生成海报
* 配置必要的商城配置
![](https://img.kancloud.cn/7d/17/7d178961d55d2a451ab17e50565ab7e8_723x460.png)
![](https://img.kancloud.cn/5f/60/5f6072685b9ae55491cff2c985ec66fd_752x553.png)
* 如果一切都配置正确,将能直接看到海报
![](https://img.kancloud.cn/93/4c/934cbcb50d42fdad28f91099466bc634_414x736.png)