本教程基于centos7.6環境中完成
- github開源項目: https://github.com/Yiuman/bpmn-vue-activiti
- 軟件：git、docker
1. 下載源代碼
git clone https://github.com/Yiuman/bpmn-vue-activiti.git
2. 修改Dockerfile文件
聲明基礎鏡像，將項目打包，把文件復制到nginx的靜態文件目錄
# 使用Node.js作為基礎鏡像
FROM node:16.0.0-alpine as build-stage# 設置工作目錄
WORKDIR /app# 復制 package.json 和 package-lock.json 文件到工作目錄
COPY package*.json ./# 安裝項目依賴
RUN npm install --legacy-peer-deps# 復制項目文件到工作目錄
COPY . .# 構建生產環境的靜態文件
RUN npm run build# 使用Nginx作為基礎鏡像
FROM nginx:1.21-alpine# 將Vue項目的構建結果復制到Nginx的默認靜態文件目錄
COPY --from=build-stage /app/dist /usr/share/nginx/html# 復制自定義的Nginx配置文件（如果有）
COPY nginx.conf /etc/nginx/nginx.conf# 暴露容器的端口（如果需要）
EXPOSE 80# 啟動Nginx服務
CMD ["nginx", "-g", "daemon off;"]
3. nginx配置文件(不用改)
這里主要是配置當我們訪問容器的80端口時，nginx將我們的請求轉發到項目文件中
#user nobody;worker_processes 1;events {worker_connections 1024;}http {include mime.types;default_type application/octet-stream;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;gzip on;server {listen 80;#前端location / {index index.html index.htm; #添加屬性。root /usr/share/nginx/html; #站點目錄}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}}
4. 制作docker鏡像
注意命令的最后有一個.
docker build -t bpmn-activiti .
- -t bpmn-activiti ：用于給構建的鏡像指定一個名稱
- . ：這是構建上下文的路徑。Docker 將在當前目錄下查找 Dockerfile 和構建上下文中的文件，并將其用于構建鏡像
鏡像制作完成之后可以利用docker images命令查看鏡像
5. 運行docker容器
docker run --name bpmn-activiti -p 8089:80 -d bpmn-activiti
- –name bpmn-activiti 指定容器名稱
- -p 8089:80 端口映射，其中8089是宿主機端口，80是容器內的端口
- -d 代表在后臺運行
- bpmn-activiti 代表鏡像名稱
6. 開放防火墻端口
// 開放8089端口
firewall-cmd --zone=public --add-port=8089/tcp --permanent
// 重啟防火墻
firewall-cmd --reload
// 查看所有開放的端口
firewall-cmd --list-ports
7. 瀏覽器訪問
在瀏覽器訪問公網IP:8089@TOC
)
