创意电子

标题: Docker部署PHP+Vue项目 [打印本页]

作者: LH4206 时间: 2019-10-14 23:11
标题: Docker部署PHP+Vue项目

本文将介绍如何使用docker镜像快速部署 php+vue 项目.文末提供源码地址
本地创建Docker映射目录

—— vue_demo # Demo项目
—— php_vue
—— docker-compose.yaml
—— nginx
———— apps # 项目代码
———— conf # nginx配置文件
—————— nginx.conf
———— log # nginx
———— vhost # 虚拟机配置目录
—————— default.conf
创建docker-compose.yaml

version : "3" #docker-compose的版本
services: #容器的集合
mysql: #项目名称
image: mysql:5.7 #镜像名称，如果是通过dockerfile创建的可以使用build属性
container_name: mysql #容器名称，如果没有这个属性的话，docker-compose会随机分配一个名字给容器
privileged: true #允许操作的表示，如果不加的话会出现类似，permission deny的错误
ports:
- 3307:3306 #开放宿主机和容器的映射端口
environment:
MYSQL_ROOT_PASSWORD: root #mysql镜像中的环境变量
php:
image: php:7.2-fpm
container_name: php
privileged: true
ports:
- 9001:9000
links:
- mysql #容器之间进行关联
volumes:
- ./nginx/apps:/usr/share/nginx/html #挂载卷，需要注意的是，php在以模块的形式加载到nginx的时候，需要他们两个的目录结构一致，否则nginx无法加载php,但是 html等静态问价可以正常访问。
nginx:
image: nginx
container_name: nginx
privileged: true
links:
- php
ports:
- 8088:80
volumes:
- ./nginx/vhost:/www/nginx/vhost
- ./nginx/conf/nginx.conf:/etc/nginx/nginx.conf
- ./nginx/log:/www/nginx/log
- ./nginx/apps:/usr/share/nginx/html
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: phpmyadmin
privileged: true
links:
- mysql
ports:
- 7001:80
environment:
MYSQL_ROOT_PASSWORD: root
PMA_HOST: mysql
redis:
image: redis:4.0.14
container_name: redis
privileged: true
ports:
- 6379:6379
mongo:
image: mongo
restart: always
ports:
- 27017:27017
建立容器,执行命令 docker-compose up -d
创建前端项目

使用vue create vue_demo或vue ui创建项目vue_demo

vue 创建项目

打包项目cd vue_demo && npm run build，复制 dist文件夹到 php_vue/nginx/apps下

vue 项目打包

测试 curl localhost:9099 返回html代码

创建php文件

欢迎光临创意电子 (https://wxcydz.cc/)