标签：index Vue log 部署 nginx html usr error Docker

Docker镜像+nginx 部署 vue 项目

一、打包vue项目

　　在开发完的vue项目输入如下命名，打包生成dist文件夹

yarn build / npm run build

　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。

　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

创建 nginx config配置文件

　在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        #  注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html;  非常重要！！！
        # 如果使用了hash模式，可以省略这个
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

上面的文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

编写Dockerfile

在项目的根目录下创建Dockerfile文件

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER cuianbing <cuianbing@outlook.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

构建项目

docker build -t imagesName .

标签：index,Vue,log,部署,nginx,html,usr,error,Docker
来源： https://www.cnblogs.com/cuianbing/p/16187180.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。