关于linux:Docker部署前端项目nuxt

一、接前文

[前文曾经介绍过 docker 的装置以及启动一个 inidex.html 的简略操作。](https://segmentfault.com/a/1190000039002615) 当初咱们再联合咱们理论我的项目进行一些操作 即部署一个前端 nuxt 前端动态我的项目。为什么是 nuxt，不是 vue-cli？因为过后公司要求实现动态化，有利于 seo，还专门请了 seo 工程师。过后咱们公司的计划是应用 freemark（约 2016 年），我依照领导的要求一步一步的操作，在 freemark 计划下实现了。然而我的开发过程不是很畅快，没有开发一般 vue 工程化我的项目那么晦涩。到当初了我看原来公司的网站架构还是当年的架构根本没变动，阐明稳定性还能够，哈哈哈。也就是那个时候开始我很在意一个门户网站是否实现了动态化，做了哪些 seo 的工作，用咱们老板的话说，搜索引擎搜不到，你们做着玩呢！啰嗦了一堆，进入明天的内容吧！

二、创立前端 nuxt 我的项目

2.1、在服务器上创立一个我的项目的文件夹。

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 文件。

三、我的项目根目录 创立 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 过程

八、关上浏览器，查看成果

九、记录学习，欢送交换斧正。