一、接前文
[前文已经介绍过docker的安装以及启动一个inidex.html的简单操作。](https://segmentfault.com/a/1190000039002615)现在我们再结合我们实际项目进行一些操作 即部署一个前端nuxt前端静态项目。
为什么是nuxt,不是vue-cli?
因为当时公司要求实现静态化,有利于seo,还专门请了seo工程师。当时我们公司的方案是使用freemark(约2016年),我按照领导的要求一步一步的操作,在freemark方案下实现了。但是我的开发过程不是很痛快,没有开发普通vue工程化项目那么流畅。到现在了我看原来公司的网站架构还是当年的架构基本没变化,说明稳定性还可以,哈哈哈。
也就是那个时候开始我很在意一个门户网站是否实现了静态化,做了哪些seo的工作,用我们老板的话说,搜索引擎搜不到,你们做着玩呢!
啰嗦了一堆,进入今天的内容吧!
二、创建前端nuxt项目
2.1、在服务器上创建一个项目的文件夹。

image.png

2.2、[安装nuxt,按照官网的步骤即可。](https://www.nuxtjs.cn/guide/installation)
https://www.nuxtjs.cn/guide/installation
2.3、nuxt有**Spa**模式和### **Universal**,Universal即服务的渲染模式。
2.4、项目安装好了以后,执行`yarn`安装依赖。
2.5、执行`yarn generate`(编译应用,并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。

* 这时候生成了dist文件。

image.png

三、项目根目录 创建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 进程
八、打开浏览器,查看效果

image.png

九、记录学习,欢迎交流指正。

李俊杰
158 声望8 粉丝