🚀 背景
Docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势,
本文主要为专职前端童鞋把自己写的demo放到服务器,主要讲解vue3+vite3项目在docker上
的部署及命令(无docker安装)
win10 安装点击 docker
mac 安装点击 docker
✈️ cmd命令
cd ... --返回上一级目录
dir / ls --查看目录文件
md 目录名 --创建目录
rd 目录名 --删除目录
cls --清除cmd屏幕
copy 路径\文件名 路径\文件名 :把一个文件拷贝到另一个地方。
move 路径\文件名 路径\文件名 :把一个文件移动(就是剪切+复制)到另一个地方
del 文件名 -- 删除文件
ping ip --测试网络是否畅通
🌟 docker命令
镜像(images)和容器(ps)的区别
相当于面向对象中的对象和类 对象=容器 类=镜像
一个镜像里面可以多个容器,也就是说镜像和容器是包含关系
docker search 镜像名字 搜索镜像
docker images 查看当前安装的镜像
docker pull XX 拉取镜像
docker rmi XX(id)删除镜像
docker image prune -a 删除无用镜像 拼-f强制删除
docker ps 查看容器运行信息
docker rm -f XX删除容器
docker container prune 删除未启动容器
docker run -it ubuntu /bin/bash 进入容器 exit 退出容器
docker run --name nginx -p 8089:8089 -d nginx 创建并启动容器
docker run -itd -p 3307:3306 --name testmysql -e MYSQL_ROOT_PASSWORD=123456 mysql 启动并连接mysql
💥 部署源码及命令
default.conf
server {
listen 80;
server_name localhost;
client_max_body_size 100m;
client_body_buffer_size 128k;
proxy_connect_timeout 5;
proxy_send_timeout 1800;
proxy_read_timeout 1800;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
auth_basic "status";
#开启gzip
gzip on;
#低于1kb的资源不压缩
gzip_min_length 1k;
#压缩级别1-9,越大压缩率越高,同时消耗cpu资源也越多,建议设置在5左右。
gzip_comp_level 5;
#需要压缩哪些响应类型的资源,多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
#配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_disable "MSIE [1-6]\.";
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html; #VUE项目,配置路由(必须)
}
location ^~ /assessh5 {
alias /usr/share/nginx/html; # inflow uni-app H5编译文件的目录,index.html所在目录
try_files $uri $uri/ /index.html last;
index index.html index.htm;
}
# location /inflow {
# try_files $uri $uri/ /inflow/index.html;
# root /usr/share/nginx/html/inflow/;
# index index.html;
# }
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
部署vue项目命令
docker build -t vue3-lazyly-admin -f ./docker/Dockerfile .
docker run -itd -p 7888:80 vue3-lazyly-admin 创建并启动容器(7888可以自己任意修改,80不行)
docker exec -it f397161b2b0b /bin/bash 进入容器(f397161b2b0b docker ps查出来的id)
先暂停 容器docker stop id 然后docker rm -f id删除镜像
Dockerfile
FROM nginx
LABEL maintainer=作者名
ARG PROJECT_DIR="vue3-lazyly-admin"
COPY --chown=nginx:nginx ${PROJECT_DIR} /usr/share/nginx/html
COPY /docker/default.conf /etc/nginx/conf.d/
WORKDIR /usr/share/nginx/html
部署vue项目命令
docker build -t vue3-lazyly-admin -f ./docker/Dockerfile .
docker run -itd -p 7888:80 vue3-lazyly-admin 创建并启动容器(7888可以自己任意修改,80不行)
docker exec -it f397161b2b0b /bin/bash 进入容器(f397161b2b0b docker ps查出来的id)
先暂停 容器docker stop id 然后docker rm -f id删除镜像
http://localhost:7888 就可以访问你的项目了!!
👀 项目地址
此项目使用的 docker部署到服务器,如觉得不错烦请点个赞🙏🙏🙏🙏🙏