本人用的 Centos7
参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/124237932
参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/125425947
npm run build
docker pull nginx
创建一个文件夹,把之后需要打包镜像的文件全部放里面,我这里直接在根目录下创建了一个VueProjects文件夹
cd /
mkdir VueProjects
进入 VueProjects 文件夹
cd VueProjects
将打包好的Vue项目【dist文件夹】上传到 VueProjects 目录中
vim default.conf
内容如下
server {
listen 80;
server_name localhost; # 修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
ps:
listen:端口
server_name:ip
root:Nginx根目录 /usr/share/nginx/html
index:主页文件名
vim Dockerfile
内容如下
FROM nginx
MAINTAINER ps
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
ps:
FROM :指定基础镜像
MAINTAINER :指定作者
RUN :删除基础镜像中的 Nginx 配置文件
ADD :配置文件替换成自己写的
COPY :打包好的 Vue 项目复制到基础镜像中 Nginx 的指定路径下
到此为止 VueProjects 目录下有两个文件一个目录
vim docker-compose.yml
内容如下
version: '3.5'
services:
mysite:
image: distribute-search/front-gjhj-image:0.0.1
container_name: front-gjhj-container
build: ./
restart: always
ports:
- "80:80"
ps:
version: ‘3.5’ :指定当前的 compose 版本【compose 版本可以通过 docker-compose --version 命令查看】
services :指定部署哪些服务
mysite :如果不指定下面的 image 参数的话,打包后的镜像名会以 当前文件夹名+下划线+你配置的名称 组合,作为你的镜像名【比如:此处我如果没指定下面的 image 参数的话,我的镜像名就是 文件夹名+下划线+配置名 == mysite_mysite】如果指定了 image 参数的话,那么这里的名字可以随便写,相当于站位符,没啥用了
image: distribute-search/front-gjhj-image:0.0.1 :指定镜像名为 distribute-search/front-gjhj-image 版本号为 0.0.1
container_name: front-gjhj-container :指定启动后的容器名为 front-gjhj-container
build ./ :在当前路径下找 Dockerfile 文件
restart: always :开机自启
ports :端口映射
docker-compose up -d
ps:
-d:守护进程运行
直接访问不到,如果你也这样的话,就依次输入下面的命令
vim /etc/sysctl.conf
#配置转发
net.ipv4.ip_forward=1
#重启服务,让配置生效
systemctl restart network
可以输入 sysctl net.ipv4.ip_forward 命令看下配置是否生效
net.ipv4.ip_forward 变成1就可以了
再次访问页面就正常显示了