Docker镜像+nginx 部署 vue 项目的方法

Docker镜像+nginx部署vue项目的方法

本文详细介绍了dockermirrornginx部署vue项目的方式，帮助大家更强有力的应用dockermirror，让有兴趣的盆友掌握。

一、打包vue项目

在开发设计的vue项目中键入以下名称，打包成dist文件夹。

yarnbuild/npmrunbuild

这时候网站的根目录下会出现一个文件夹:空dist文件夹，里面有我们要发布的物品。

如果所有的dist文件目录都传输到网络服务器，那么作为静态数据资源部署的网站就可以立即浏览项目。

二。获取nginx图像

Nginx是一个优秀的HTTP和反向代理网络服务器。这里，我们使用nginx映像作为构建vue应用程序映像的基础。

在终端设备上，键入:

dockerpullnginx

也就是说，可以获得nginx图像。

Docker镜像是一个独特的系统文件，它不仅显示了器具运行所需的程序、库、资源、设备等文件，还包括一些主要的设备参数(如密卷、系统变量、客户等。)提前做好 *** 作准备。镜像不包含所有可视数据，并且其内容在构建后不会更改。

在终端设备中键入以下命令，查看nginx的图像。

dockerimagels

镜像结果如下所示:

三。建立nginx配置环境变量

在项目的根目录下建立nginx文件夹，并在该文件夹下新建一个文件default.conf。

server{ listen80; server_namelocalhost; #charsetkoi8-r; access_log/var/log/nginx/host.access.logmain; error_log/var/log/nginx/error.logerror; location/{ root/usr/share/nginx/html; indexindex.htmlindex.htm; try_files$uri$uri//index.html; } #error_page404/404.html; #redirectservererrorpagestothestaticpage/50x.html # error_page500502503504/50x.html; location=/50x.html{ root/usr/share/nginx/html; } }

注意:如果vue-router应用历史方法，try_files$uri$uri//index.html；很关键！！！

因为每个人的应用都是小叶手机客户端的应用，如果后台管理配备不当，客户在电脑浏览器中浏览详细地址时会返回404。

因此，有必要在服务器端升级一个覆盖所有情况的替代资源。如果URL不能匹配所有的静态数据资源，你应该返回到同一个index.html网页，这是你的app所依赖的网页。

上面的文档将homepagebias定义为/usr/share/nginx/html/index.html，所以我们可以在后面将构建的index.html文档和相关的静态数据资源放到/usr/share/nginx/html文件目录中。

四。建立Dockerfile文档

#设定基本镜像 FROMnginx #界定创作者 MAINTAINERlihui<1107136746@qq.com> #将dist文档中的內容拷贝到/usr/share/nginx/html/这一文件目录下边 COPYdist//usr/share/nginx/html/ #用当地的default.conf配备来更换nginx镜像里的默认设置配备 COPYnginx/default.conf/etc/nginx/conf.d/default.conf

五、根据Dockerfile构建vue应用镜像

以下 *** 作说明，注意不要漏掉最后的“.”

dockerbuild-ttest.

-t是镜像的名称，test是镜像的名称，而。是根据当前目录的Dockerfile来构建镜像。

按照vue的镜像，就会成型！

以上是docker如何镜像nginx部署vue项目的详细内容。关于Docker部署vue项目的大量资料，请关注其他相关文章！