Vue项目配置
使用Vite创建一个Vue项目，点我查看如何创建
配置打包路径
在Nginx中如果是二级目录，例如
/web时，需要设置线上的打包路径
在项目跟路径下创建两个文件：.env.production、.env.development，写入一下内容：
##生产环境
NODE_ENV = 'production'
VITE_BASE_PATH = /form-designer/
##开发环境
NODE_ENV = 'development'
VITE_BASE_PATH = '/'
在vite.config.js中配置base属性，打开配置文件：
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) =>{
// 获取 .env 环境配置文件
const env = loadEnv(mode, process.cwd());
return {
base: env.VITE_BASE_PATH,
plugins: [vue()],
}
})
修改package.json，添加build命令：
"scripts": {
"dev": "vite",
"build": "vite build --mode production",
"preview": "vite preview"
},
配置路由
路由有两种模式：Hash和History
Hash模式
该模式下无需做过多配置
const router = createRouter({
history: createWebHashHistory(''),
routes,
....
});
history模式
该模式需要设置base路径
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_BASE_PATH),
routes,
....
});
打包项目
使用下面命令打包
npm run build
压缩文件夹，方便上传到服务器进行打包部署
tar -zcvf dist.tar.gz dist/
Docker配置
工作系统中需要安装Docker环境，打包镜像用。这里以CentOS为例安装Docker
使用下面命令安装：
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
出现命令提示，即为安装成功：
[root@swcode docker]# docker
Usage: docker [OPTIONS] COMMAND
A self-sufficient runtime for containers
Common Commands:
run Create and run a new container from an image
exec Execute a command in a running container
ps List containers
build Build an image from a Dockerfile
pull Download an image from a registry
push Upload an image to a registry
images List images
login Log in to a registry
logout Log out from a registry
search Search Docker Hub for images
version Show the Docker version information
info Display system-wide information
配置Docker镜像源：
进入下面目录：
cd /etc/docker/
创建daemon.json，写入下面内容:
{
"registry-mirrors": ["http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn","https://mirror.baidubce.com","https://registry.docker-cn.com"]
}
阿里云的镜像加速很好用的，点我获取加速地址
使配置生效
systemctl daemon-reload
systemctl restart docker
制作镜像
将文件上传到服务器上进行打包和发布，Dockerfile和要打包的文件需要在同一个目录下，确保服务器上已经安装Docker环境。
Dockerfile
# Docker image for vue application
# VERSION 1.0.0
# Author: swcode
### 基础镜像，使用nginx镜像
FROM nginx
#作者
MAINTAINER swcode <[email protected]>
#应用构建成功后的文件被复制到镜像内
COPY dist /usr/share/nginx/html/form-designer/
#拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
#启动容器时的进程
ENTRYPOINT nginx -g "daemon off;"
Nginx配置
创建nginx.conf配置文件，基于location实现二级访问目录，修改配置信息：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/json;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location ^~/form-designer {
alias /usr/share/nginx/html/form-designer;
index index.html index.htm;
# 路由为 history 模式需要设置该项
try_files $uri $uri/ /form-designer/index.html;
}
# 代理服务
location /api {
default_type application/json;
#internal;
keepalive_timeout 30s;
keepalive_requests 1000;
#支持keep-alive
proxy_http_version 1.1;
# 路径重写 /api/user => /user
rewrite /api(/.*) $1 break;
proxy_pass_request_headers on;
proxy_next_upstream error timeout;
# Docker同一网络内部使用服务名访问
proxy_pass http://microService:8800;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}
注意！配置了root之后，其他的二级目录需要使用alias
如果是Docker部署，且后端项目和前端项目在同一自定义网络下（使用Docker Compose编排），代理地址使用服务名即可
上传文件
将dist.tar.gz上传到服务器，使用下面命令解压
tar -zxvf dist.tar.gz
确保下面三个文件在同一目录
Dockerfile
nginx.conf
dist/
build镜像
使用下面命令，build镜像
docker build -t form-designer .
- form-designer：表示镜像名
- ‘.’：表示当前目录
ngnix没有指定版本会自动拉取最新版，等待镜像build。。。
[root@swcode dockerfile]# docker build -t form-designer .
[+] Building 0.1s (8/8) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 469B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/nginx:latest 0.0s
=> [1/3] FROM docker.io/library/nginx 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 1.15kB 0.0s
=> CACHED [2/3] COPY dist /usr/share/nginx/html/form-designer/ 0.0s
=> [3/3] COPY nginx.conf /etc/nginx/nginx.conf 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:3212e45813e7d278aa33982cc7373e55418b9a3ed65c0249b8fd55c70bf6ee32 0.0s
=> => naming to docker.io/library/form-designer
使用docker命令查看镜像
[root@swcode dockerfile]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
form-designer latest 372e067b2c6a 48 minutes ago 190MB
运行容器
使用下面命令运行容器：
docker run --name form-designer-web -p 81:80 -d form-designer
- form-designer-web：是容器名
- form-designer：是镜像名
- -p 81:80：表示服务器端口(外部)81映射到容器内部端口80
使用docker命令查看容器
[root@swcode dockerfile]# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
65f0979310a1 form-designer "/bin/sh -c 'nginx -…" 48 minutes ago Up 48 minutes 0.0.0.0:81->80/tcp form-designer-web
访问网站
访问网址：http://ip:81/form-designer
其他命令
删除镜像
docker rmi [镜像名 ｜ 镜像ID]
删除容器
docker rm -f [容器名 ｜ 容器ID]