前端部署 虚拟机以Centos 7 系统为例
1.安装gcc
yum -y install gcc
yum -y install gcc-c++
2.安装dokcer
yum install docker
3.启动docker
systemctl start docker
4.设置开机自启动
systemctl enable docker
5.拉取 nginx
docker pull nginx
6.启动 nginx （以下步骤为测试）
docker run --name nginx -p 80:80 -d nginx
7.挂在nginx 这样就不用每次去修改配置 ，直接挂在nginx文件路径
mkdir /usr/local/nginx
mkdir /usr/local/nginx/www
mkdir /usr/local/nginx/conf
mkdir /usr/local/nginx/logs
7.1 复制nginx容器中的相关文件到本地
docker cp b628a3549580:/etc/nginx/nginx.conf /usr/local/nginx/nginx.conf
docker cp b628a3549580:/etc/nginx/conf.d /usr/local/nginx/conf/
docker cp b628a3549580:/usr/share/nginx/html/ /usr/local/nginx/www/html/
docker cp b628a3549580:/var/log/nginx/access.log /usr/local/nginx/logs/access.log
docker cp b628a3549580:/var/log/nginx/error.log /usr/local/nginx/logs/error.log
注：docker cp b628a3549580中的 "b628a3549580" 为容器ID前缀，只要唯一就好了，可通过docker ps -a找到nginx的容器ID 7.2 删除之前的容器 停止容器：
docker stop b628a3549580
移除容器：
docker rm b628a3549580
7.3 启动nginx并挂载路径
docker run --name nginx -p 80:80 -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/www/html/:/usr/share/nginx/html/ -v /usr/local/nginx/logs/access.log:/var/log/nginx/access.log -v /usr/local/nginx/logs/error.log:/var/log/nginx/error.log -v /usr/local/nginx/conf/conf.d/:/etc/nginx/conf.d/ --privileged=true -d nginx
8.把前端项目打包（npm run build 注意vue.config.js文件中 publicPath='/'），并且配置对应的Dockerfile 和nginx.conf文件
Dockerfile文件
# 设置基础镜像
FROM nginx
# 将dist文件中的内容复制到 /app/dist 这个目录下面
COPY ./dist/ /usr/share/nginx/html/
#用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY nginx.conf /etc/nginx/nginx.conf
nginx.conf文件
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
client_max_body_size 20m;
server {
listen 80;
# ip地址 上线的话可以切换成服务器ip地址
server_name 192.168.102.130;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#如果设置了代理
location /api {
proxy_pass http://192.168.102.130:5000;
}
}
9.在这三个文件（dist Dockerfile nginx.conf）下开启终端 创建镜像
docker budil -t web-vue . //创建镜像注意后面是一个点
10.查看镜像是否创建成功
docker images //查看所有镜像
11.启动容器
docker run -p 8085:80 -d --name web-vue web-vue
（-p 是端口映射，-d 是后台启动，-name 是给容器命名 第二个web-vue 是镜像名称）
12.查看正在运行的容器
docker ps
13.如果部署的端口已经在运行，访问 192.168.xx.xx：8085 (访问 虚拟机ip+映射端口) 就出现了前端项目
服务端部署（nodejs + mongodb）
1.拉取node 和 mongo (根据自己的版本来)
docker pull node:12.2.0
docker pull mongo:4.1.0
2.把服务端代码 拷贝到虚拟机中,新建Dockerfile文件
3.Dockerfile文件
FROM node:12.2.0
#是将我们创建的文件夹做为工作目录（注意：这个文件路径是镜像内部的文件路径)
WORKDIR /usr/src/server
#是把服务器当前目录下的所有文件拷贝到镜像的/usr/src/server文件夹下。
COPY . /usr/src/server
#使用npm 安装我们的app据需要的所有依赖。
RUN npm install
#根据自己的服务的端口
EXPOSE 5000
#运行这个node.js 项目
CMD [ "node", "server.js" ]
4.创建镜像
docker budil -t server-test .
docker run -p 5000:5000 -d --name server-test server-test
5.启动容器
6.启动 ip+端口 访问服务端
