怎么通过docker/portainer部署vue项目

这篇具有很好参考价值的文章主要介绍了怎么通过docker/portainer部署vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这篇文章分享一下如何通过docker将vue项目打包成镜像文件,并使用打包的镜像在docker/portainer上部署运行,写这篇文章参考了vue-cli和docker的官方文档。

首先,阅读vue-cli关于docker部署的说明,上面提供了关键的几个步骤。

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

从上面的页面内容中,得出了以下结论:前端项目需要依赖http服务器来部署,比如tomcat、apache、nginx等。

接下来开始进入正题,通过自己的天天生鲜商城的前端vue项目,手把手教大家一步一步地构建自己的vue项目的前端镜像,并在docker上启动起来。

目录

第一步、通过git拉取vue前端项目

第二步、下载项目依赖

第三步、创建nginx.conf

第四步、创建Dockerfile

安装npm

下载nginx的镜像

下载node.js的镜像

第五步、创建.dockerignore文件

第六步:修改项目里使用的ip地址

第七步、编译项目

第八步、构建前端镜像

第九步、在docker/portainer上部署

docker上部署

portainer上部署

第十步:挂载nginx配置文件

确认挂载路径

创建挂载路径

复制挂载文件

开启文件挂载


第一步、通过git拉取vue前端项目

在ubuntu的任意目录下执行以下命令拉取git项目的代码,建议在ubuntu的根目录/下操作。

1、切换到根目录

cd /

 2、克隆项目

git clone https://gitee.com/he-yunlin/ttsx.git

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

第二步、下载项目依赖

进入项目的根目录下

cd /ttsx

下载项目依赖

npm install

当执行npm install命令时,提示安装npm。

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

按照提示安装即可

apt install npm

安装过程会询问是否继续,输入y回车。

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

第三步、创建nginx.conf

在项目根目录下创建nginx.conf,文件内容如下

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;

  server {
    listen       80;
    server_name  localhost;

    location / {
      root   /ttsx;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

第四步、创建Dockerfile

在ttsx项目的根目录下创建一个Dockerfile文件,文件内容如下:

FROM node:14.16.0 as build-stage
WORKDIR /ttsx
COPY package*.json ./
COPY ./ .
​
FROM nginx as production-stage
RUN mkdir /ttsx/
COPY --from=build-stage /ttsx/dist /ttsx
COPY nginx.conf /etc/nginx/nginx.conf

这个Dockerfile文件做了以下几件事:

  • 基于node.js构建一个docker容器A,在这个容器内部创建工作目录/ttsx
  • 把项目ttsx的根目录下的文件复制到容器内部工作目录/ttsx下
  • 基于nginx构建一个容器B,在这个容器内部创建工作目录/ttsx
  • 把容器A的/ttsx/dist目录下的文件复制到容器B的/ttsx目录下
  • 把项目ttsx根目录下的nginx.conf复制为容器B的/etc/nginx/nginx.conf文件

接下来需要下载Dockerfile文件里要用到的命令和docker镜像:

下载nginx的镜像

下载最新版本的即可

docker pull nginx

下载node.js的镜像

docker pull node:14.16.0

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

第五步、创建.dockerignore文件

在项目根目录下创建名为.dockerignore的文件。

.dockerignore文件配置在Dockerfile中执行COPY命令时忽略的文件,比如COPY ./ .这条命令会把当前项目根目录下的所有文件(除了配置在了.dockerignore文件里的)都复制到docker容器内部。

注意:上面的Dockerfile会从容器A中复制/app/dist,所以这里不能忽略/dist,否则就找不到了,镜像会构建失败。

**/node_modules
README.md
.gitignore
.dockerignore
Dockerfile
.idea

第六步:修改项目里使用的ip地址

既然是在服务器上运行,就不能再用localhost了,应该改成对应的服务器ip地址。修改项目里用到的ip地址及端口号。

第七步、编译项目

npm run build

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

编译完成后,生成了一个dist目录

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

第八步、构建前端镜像

docker build . -t ttsx:20231003hyl

第九步、在docker/portainer上部署

docker上部署

只需要通过docker的run命令运行刚刚打包的镜像,命令如下:

docker run ttsx:20231003hyl

portainer上部署

在portainer中添加一个应用程序栈stack,填写docker-compose.yml

version: "3"
​
services:
  ttsx:
    container_name: ttsx
    image: ttsx:20231003hyl
    ports:
      - 8088:80

填写完成后页面下拉,找到并点击Depoly the stack按钮,portainer就会帮我们通过指定的镜像和端口信息创建并运行一个docker容器。

第十步:挂载nginx配置文件

一般情况下,nginx.conf是可能被频繁修改的,为了能够方便地修改前端镜像中的nginx.conf,需要让其和宿主机的文件建立挂载关系。

注意:以下操作的前提是你没有在docker的宿主机ubuntu上面安装nginx,如果安装了nginx,需要考虑需要修改一下挂载路径,否则从容器内部复制出来的配置文件会覆盖原来的nginx.conf的内容。

确认挂载路径

第一步,就是要确认挂载路径,就是你要把docker容器内的nginx.conf放在什么路径下面。

比如就挂载在和docker容器内部的nginx.conf一样的位置

/etc/nginx/nginx.conf

创建挂载路径

如果你的ubuntu上如果没有安装过nginx的话,需要在宿主机ubuntu上面创建对应的挂载路径,路径没有要求。

mkdir -p /etc/nginx

然后要在这个目录下创建nginx.conf文件,内容为空

cd /etc/nginx
touch nginx.conf

复制挂载文件

接下来就是把nginx.conf文件从docker容器内部复制文件出来,使用docker的cp命令。

docker cp 容器ID/容器名:容器内的文件路径 宿主机的文件路径

所以这篇文章中,复制nginx.conf的命令为

docker cp ttsx:/etc/nginx/nginx.conf /etc/nginx/nginx.conf

如图,执行完以上命令之后,刷新/etc/nginx目录,nginx.conf文件变成了827B,复制成功。

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

开启文件挂载

这也是最后一步,在ttsx的stack的docker-compose.xml,添加挂载设置

version: "3"

services:
  ttsx:
    container_name: ttsx
    image: ttsx:20231005hyl
    ports:
      - 8088:80
    volumes:
      - /etc/nginx/nginx.conf:/etc/nginx/nginx.conf

怎么通过docker/portainer部署vue项目,linux上部署项目运行环境,vue.js,前端,docker,ubuntu

好了,docker部署vue前端项目的全部过程都介绍完了,看完不要忘了点赞+收藏哦~文章来源地址https://www.toymoban.com/news/detail-729476.html

到了这里,关于怎么通过docker/portainer部署vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • gitee拉取vue项目并通过vue ui运行

    下载git: 官网下载(慢):https://git-scm.com/ 建议下载网址(快):https://npm.taobao.org/mirrors/git-for-windows/ 该网站为降序排序,最后一个为当前版本#x

    2024年02月13日
    浏览(49)
  • ubuntn之容器的基本操作(安装docker|运行容器|portainer)

    目录 一、安装Docker引擎         1.方法一:手动安装(手动添加软件源)                2、方法二:脚本自动化安装  二、安装后的检查操作 三、运行一个容器 四、进入容器 五、镜像生命周期管理 一、镜像part 二、创建容器、启动容器 三、暂停/继续容器 四、 终

    2024年01月18日
    浏览(50)
  • Docker部署(5)——使用docker run命令部署运行jar项目

           对于一些简单的单体项目,可以使用 docker run 命令可以直接在命令行中运行容器,无需事先构建镜像。这相较于之前使用的 dockerfile 文件来运行部署项目相当于是另外一种简单的部署方法,关于之前使用dockerfile 文件来运行部署这种方法,具体可以参考下面这篇文章

    2024年02月10日
    浏览(49)
  • JAVA开发与运维(怎么通过docker部署微服务jar包)

    目标: 通过docker的方式部署微服务。 我们通过java开发的微服务可以打成jar包,我们可以直接通过裸机部署,也可以通过docker来部署,本文介绍通过docker来部署微服务。 Docker 是一个用于开发,交付和运行应用程序的开放平台。 Docker 将应用程序与基础架构分开,从而可以快速

    2024年02月09日
    浏览(44)
  • IDEA通过Docker插件部署SpringBoot项目

    找到并编辑服务器上的docker.service文件。 在下面ExecStart替换成下面的 有以下信息输出说明配置成功 连接成功就可以在idea里面使用docker了 1、pom.xml中添加Docker插件坐标 这是为了在本项目中引入docker来管理,毕竟最后要使用docker把项目打包成一个镜像。 注意三个事情: 1.版本

    2024年02月07日
    浏览(47)
  • Docker管理工具Portainer忘记admin登录密码怎么办?

    Portainer官网解决方法链接 https://docs.portainer.io/v/ce-2.11/advanced/reset-admin 炒鸡详细步骤! 1.查看所有容器,包括未运行的 2.找到Portainer对应信息  3.停止Portainer容器 4.找到Portainer容器挂载信息  找到这个信息 5.执行命令重置密码  现在admin登录的密码就为:4~!15SlshwmY#89FpcRE06u{HL2(_

    2024年01月16日
    浏览(45)
  • 【Docker基础入门】部署docker管理工具portainer-ce

    Portainer是一个可视化的容器镜像的图形管理工具,利用Portainer可以轻松构建,管理和维护Docker环境。 而且完全免费,基于容器化的安装方式,方便高效部署。 Portainer Community Edition是一个用于容器化应用程序的轻量级服务交付平台,可用于管理 Docker、Swarm、Kubernetes 和 ACI 环境

    2024年02月10日
    浏览(49)
  • 通过制作llama_cpp的docker镜像在内网离线部署运行大模型

    对于机器在内网,无法连接互联网的服务器来说,想要部署体验开源的大模型,需要拷贝各种依赖文件进行环境搭建难度较大,本文介绍如何通过制作docker镜像的方式,通过llama.cpp实现量化大模型的快速内网部署体验。 一、llama_cpp介绍 LLaMA 全称是Large Language Model Meta AI,是由

    2024年02月05日
    浏览(53)
  • 【Docker管理工具】使用Docker部署portainer-ce管理工具

    Portainer是一个可视化的容器镜像的图形管理工具,利用Portainer可以轻松构建,管理和维护Docker环境。 而且完全免费,基于容器化的安装方式,方便高效部署。 Portainer Community Edition是一个用于容器化应用程序的轻量级服务交付平台,可用于管理 Docker、Swarm、Kubernetes 和 ACI 环境

    2024年02月19日
    浏览(58)
  • vue项目通过nginx部署到服务器

    部署的服务器是阿里云买的,使用finalShell根据账号秘密链接服务器即可 找到/user/local/nginx/conf/下面的nginx.conf文件进行配置,这里单独新建一个finace.conf文件,配置后再导入到nginx.conf文件,便于管理 这个Nginx服务器配置设置了一个监听端口为8081的服务器,服务器名称设置为127.0.0.

    2024年03月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包