#####一、接前文
前文已经介绍过docker的安装以及启动一个inidex.html的简单操作。现在我们再结合我们实际项目进行一些操作 即部署一个前端nuxt前端静态项目。
为什么是nuxt，不是vue-cli？
因为当时公司要求实现静态化，有利于seo，还专门请了seo工程师。当时我们公司的方案是使用freemark（约2016年），我按照领导的要求一步一步的操作，在freemark方案下实现了。但是我的开发过程不是很痛快，没有开发普通vue工程化项目那么流畅。到现在了我看原来公司的网站架构还是当年的架构基本没变化，说明稳定性还可以，哈哈哈。
也就是那个时候开始我很在意一个门户网站是否实现了静态化，做了哪些seo的工作，用我们老板的话说，搜索引擎搜不到，你们做着玩呢！
啰嗦了一堆，进入今天的内容吧！
#####二、创建前端nuxt项目
2.1、在服务器上创建一个项目的文件夹。
https://www.nuxtjs.cn/guide/installation
2.3、nuxt有Spa模式和### Universal，Universal即服务的渲染模式。
2.4、项目安装好了以后，执行yarn安装依赖。
2.5、执行yarn generate（编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。
）
* 这时候生成了dist文件。
#####三、项目根目录 创建default.conf文件
server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
#####四、项目根目录 创建Dockerfile文件
MAINTAINER my-nuxt-app RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
#####五、安装nginx镜像
docker pull nginx
#####六、Docker打包
docker build -t vue-docker .
-t 是给镜像命名 . 是基于当前目录的Dockerfile来构建镜像
- 记得末尾的 .
#####七、运行docker run -d -p 8082:80 my-nuxt-app docker run基于镜像启动一个容器-p 8082:80端口映射，将宿主的3000端口映射到容器的80端口-d后台方式运行--name容器名 查看 docker 进程
#####八、打开浏览器，查看效果
#####九、记录学习，欢迎交流指正。
