docker 部署前端Vue项目

linjun20

已于 2022-05-13 09:02:57 修改

阅读量2k

点赞数

分类专栏：容器文章标签： vue.js 前端 docker

于 2022-05-11 09:36:45 首次发布

本文链接：https://blog.csdn.net/linjun20/article/details/124702941

版权

容器专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.创建vue项目并编译打包

编译打包

npm install

npm run build

在dist目录即可看到编译之后打包的文件

注意

添加vue项目上下文

vue.config.js中添加 publicPath

module.exports = {

  transpileDependencies: ["uview-ui"],

  publicPath: "/hello/"

};

manifest.json中添加应用名name

{

    "name": "hello",

    "appid": "",

    "description": "",

    "versionName": "1.0.0",

    "versionCode": "100",

....

2.编写dockerfile

FROM xxxx.xxxx/nginx:1.12
COPY hello /usr/share/nginx/html/hello
COPY default.conf /etc/nginx/conf.d/default.conf

Dockerfile说明

FROM xxxx.xxxx/nginx:1.12

基于nginx构建镜像，将vue部署到nginx中。

COPY hello /usr/share/nginx/html/hello
COPY default.conf /etc/nginx/conf.d/default.conf

复制vue资源以及nginx配置到容器里,hello文件夹里是编译打包后的文件，注意需要给hello文件夹授权 chmod 777 -R hello 不然会出现无法403无法访问的情况

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;
        }

        location ^~ /api/(.*)$ {
                proxy_set_header Host $host;
                proxy_set_header  X-Real-IP  $remote_addr;
                proxy_pass   http://xxxx:8080/$request_uri;

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

3.构建镜像

docker build -t hello .

注意 . 表示当前目录，不可省略

构建完成之后可以使用docker images查看

4.上传制品库(没有制品库可忽略)

4.1打成满足要求的tag

docker tag 7649021c873e xxxx.xxxx/ng-hello:v1

4.2 上传到制品库


docker push xxxx.xxxx/ng-hello:v1

5.从制品库拉取镜像(没有制品库可忽略)

docker pull docker push xxxx.xxxx/ng-hello:v1

6.运行容器


docker run                                 #运行一个容器
    --name hello                          #设置容器名称
    -p 80:80                 #映射主机和容器内的端口
    -d                                                #后台运行
    xxxx.xxxx/ng-hello:v1