docker部署vue3

何为docker

官方的解释是：Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows操作系统的机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。
下面就是一个docker的运用场景图：

我的理解：docker是一个容器化工具，相当于一个箱子，开发人员在这个箱子中开发，里面包含环境，代码等等一系列的东西。在需要发布的时候，直接让运维把这个“抱走”，或者测试人员需要测试的时候也能把这个箱子“抱走”，这样就减少了环境不一样而导致代码跑不起来的问题。如何让别人把这个箱子抱走呢。我们就用到了一个文件叫做dockerfile。

何为nginx

还是一样先看看官方的解释：Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。
说白了，nginx就是一个代理服务器能够把跑的项目映射到别的端口上去。

编写dockerfile

我们这里有一个vue3的项目 项目结构非常简单

其中我增加的配置只有nginx.conf，.dockerignore和dockerfile
其中.dockerignore和dockerfile为docker的配置，nginx.conf为nginx的配置
在dockerfile中写入如下的配置

# 第一阶段：构建项目
FROM node:18 as builder
WORKDIR /app
RUN npm config set registry https://registry.npm.taobao.org
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
# 第二阶段：运行项目
FROM nginx
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

文件比较简单，就不做过多的赘述
nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
      listen       80;
      server_name  localhost;
      location / {
          root   /app;
          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;
      }
    }
}

这里的配置也比较简单复制粘贴即可。

部署服务器

我的服务器是CentOS7.6的，我使用的是腾讯云的服务器，这里我就直接使用腾讯云的在线连接工具对服务器进行操作

首先服务器中需要安装git docker等一些常用的工具

yum install wget curl vim git epel-release -y
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
        
systemctl start docker
systemctl enable docker

然后我们把代码上传到gitee

这里我已经上传了。

然后我们去服务器把代码拉下来

可以看见这路我们已经拉下来了。
我们进入这个目录

cd docker-study

然后我们进行docker构建

docker build -t dockerstudy:dockerstudy .

这样就算构建完成了

我们来看看

然后我们让这个跑起来

docker run -d -p 8080:80 dockerstudy:dockerstudy

然后就能看到你部署的vue项目了