ubuntu docker 部署 vue 项目

ubuntu docker 部署 vue 项目

• ​​初​​

• ​​检查安装nginx的镜像​​
• ​​编译打包vue项目​​

• ​​文件内容如下：​​

• ​​default.conf​​
• ​​Dockerfile​​

• ​​创建镜像：千万不要漏掉最后的一个点​​
• ​​启动容器：​​
• ​​结果​​

初

希望能写一些简单的教程和案例分享给需要的人

检查安装nginx的镜像

通过命令确认是否安装完成：
sudo docker images

sudo docker images

如果没有nginx ，就需要安装这个镜像，可以指定某个版本，也可以选择最新版，我这边选的是最新版

sudo docker pull nginx:latest

编译打包vue项目

npm run build

打包后，我们会看到文件夹 dist

把文件拖到 ubuntu 服务器中

然后创建两个文件：

1. default.conf
2. Dockerfile

文件内容如下：

default.conf

FROM nginx
MAINTAINER webapp
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

Dockerfile

server {
    listen       80;
    server_name  192.168.246.133; # 修改为docker服务宿主机的ip，可以通过命令 ip addr 查看

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
                
    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8080/;
        client_max_body_size 50m;
        sendfile on;
        keepalive_timeout 1800;
    }       

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

创建镜像：千万不要漏掉最后的一个点

sudo docker build -t 【镜像名】 .

sudo docker build -t watch-web .

启动容器：

sudo docker run -d -p 9090:80 --name 【容器名】【镜像名】

sudo docker run -d -p 9090:80 --name watch1 watch-web

结果

启动成功后就可以访问啦~