docker项目部署

Posted 2023-02-28 计划是动力

docker项目部署

• • 1. vue项目docker部署
  • • linux如何查看当前目录的完整路径
    • 安装nginx镜像
    • vue项目打包
    • docker部署方式一：挂载（适用于要经常修改的情况）
    • docker部署方式二：COPY（适用于修改少的情况）

1. vue项目docker部署

linux如何查看当前目录的完整路径

pwd

安装nginx镜像

docker pull nginx

vue项目打包

如果packa.json里面是这样的，执行下面的打包命令

npm run build

如果packa.json里面是这样的，执行下面的打包命令

npm run build:prod

之后vue项目会生成dist文件夹

docker部署方式一：挂载（适用于要经常修改的情况）

创建项目vueapp
在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 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;    
        
    
    #error_page  404              /404.html;
    
    # redirect server error pages to the static page /50x.html    
    # 
    error_page   500 502 503 504 /50x.html;
    location = /50x.html 
        root   /usr/share/nginx/html;
    

直接基于 Nginx 镜像来启动容器 vueapp
创建启动脚本

vi vueapp.sh

docker run \\
-di --name vueapp \\
-p 9526:80 \\
 -v /root/vueapp/nginx:/etc/nginx/conf.d \\
-v /root/vueapp/dist:/usr/share/nginx/html \\
nginx

启动docker服务

sh vueapp.sh

这样就能每次修改了 Nginx 配置或者重新构建了 Vue 应用的时候，只需重启容器就能立马生效

docker部署方式二：COPY（适用于修改少的情况）

创建 Dockerfile 文件

vi Dockerfile

写入下面的语句

FROM nginx
MAINTAINER robert
COPY dist/ /usr/share/nginx/html/ 
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

docker创建容器

docker build -t vueapp .

docker运行服务

docker run -d --name vueapp -p 9526:80 nginx