群晖docker使用nginx部署前端

1. 群晖文件目录创建放置前端文件的文件夹

①在群晖的File Station中，选择一个文件夹，在空白处右键，点击新建文件夹。

②在弹出的窗口中输入文件夹名称后，点击确定，完成文件夹创建。

③按照上述方法在新建的文件夹中再创建一个名为html的文件夹用于放置前端静态文件。

2. docker安装nginx

①打开群晖docker，选择注册表，右键nginx镜像，点击下载此映像。

②在弹出的选择标签窗口，点击应用。

③转到映像页面，右键下载的nginx镜像，点击运行。

④在docker容器的常规设置中填写容器名称后，点击下一步。

⑤在端口设置中，将docker中的80端口映射到本地的自定义端口，这边映射到2088端口。

⑥在存储空间设置中，将容器的/usr/share/nginx/html文件夹映射到第一步新建的html文件夹。用于将群晖中的文件放置到dokcer容器中。点击下一步，点击完成即可完成容器创建。

⑦跳转到容器页面，右键新建的nginx容器，点击详情。

⑧跳转到日志页面，当容器处于start woker process 状态时即容器启动成功。

3. 映射本地端口到公网

①将刚刚设置的本地2088端口映射到公网进行访问。在控制面板中点击外部访问，点击新增，勾选新建的docker容器，点击完成。

②完成后，点击应用，待测联机测试结果显示OK即完成端口映射操作。

③跳转到你的域名后2088端口，如显示以下画面则nginx已成功完成公网访问。

4. 编译前端项目

①选择一个vue前端项目，在控制台输入npm run build编译前端项目。

②显示如下结果即编译成功。编译文件放置在dist文件夹中

5. 放置前端项目文件

①打开群晖中在第一步创建的html文件夹，将dist中的文件全部复制到html文件夹中

6. 访问前端项目

①将前端静态文件放置到上述文件夹中后，刷新网页即可完成前端项目部署。