Docker通过nginx部署前端Vue项目

docker以及镜像安装

2.1.6、安装docker引擎

yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin

2.1.7、启动docker

systemctl start docker

2.1.8、查看docker版本

docker version

2.1.1、检查环境

Docker运行环境要求系统为64位、Linux系统内核版本为 3.8以上

查看自己虚拟机的内核:cat /etc/redhat-release

拉取镜像nginx:1.18.0

docker pull nginx:1.18.0

2.2.5、查看镜像

docker images

4.1、Nginx镜像部署

因为需要nginx的初始化配置文件,为了保证不出错,

所以我们直接启动一个nginx容器,把配置文件拉取下来,然后删除容器

4.1.1、创建nginx工作目录

#需要一个conf文件存放目录,和html文件目录,及日志存放目录

mkdir -p /data/applications/nginx/conf

mkdir -p /data/applications/nginx/html

mkdir -p /data/logs

4.1.2、启动nginx容器,如果这个镜像本机中没有,会自动下载镜,我这下载是的1.18版本

docker run --name nginx -p 80:80 -d nginx:1.18.0

4.1.3、复制容器中配置文件目录到本机中,然后删除该容器

docker cp nginx:/etc/nginx/nginx.conf /data/applications/nginx/conf/nginx.conf

docker cp nginx:/etc/nginx/conf.d /data/applications/nginx/conf/conf.d

docker cp nginx:/usr/share/nginx/html /data/applications/nginx/

#先用 [docker ps – a] 命令 找到对应容器ID

#才可以删除容器

docker rm -f [容器ID]

4.1.4、启动新的nginx容器

docker run -d \

-p 80:80 \

-p 443:443 \

--name nginx \

--restart=always \

--network-alias nginx \

-e TZ="Asia/Shanghai" \

-v /data/applications/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \

-v /data/applications/nginx/conf/conf.d:/etc/nginx/conf.d \

-v /data/logs/nginx:/var/log/nginx \

-v /data/applications/nginx/html:/usr/share/nginx/html \

-v /data/applications/nginx/cert:/etc/nginx/cert \

nginx:1.18.0

再一次提醒firewalld防火墙是否关闭,或者端口是否开启,以及服务器的安全组是否配置!

命令说明:

privileged=true # 容器内被赋予root权限

-v /data/applications/nginx/html:/usr/share/nginx/html # 挂载的静态文件目录

-v /data/applications/nginx/nginx.conf:/etc/nginx/nginx.conf # 挂载的nginx配置文件目录

-v /data/applications/nginx/logs:/var/log/nginx #挂载nginx日志文件

-v /data/applications/nginx/cert: /etc/nginx/cert # ssl证书挂载目录

4.1.5查看容器 或 访问服务器ip地址(检验是否启动成功)

docker ps -a

4.4.5、将 前端项目 拷贝到Linux服务器中nginx容器对应的html目录下

4.5、配置域名的SSL证书

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用Docker部署Nginx来访问Vue项目时,可以按照以下步骤进行操作: 1. 首先,确保已经安装了DockerDocker Compose。这两个工具可以帮助我们管理和运行容器。 2. 创建一个新的文件夹,用于存放相关的配置文件和代码。 3. 在该文件夹下创建一个名为`Dockerfile`的文件,并添加以下内容: ``` # 使用官方的Nginx镜像作为基础镜像 FROM nginx # 删除默认的Nginx配置文件 RUN rm /etc/nginx/conf.d/default.conf # 将自定义的Nginx配置文件复制到容器中 COPY nginx.conf /etc/nginx/conf.d # 将Vue项目的静态文件复制到Nginx的默认网站目录 COPY dist /usr/share/nginx/html # 暴露80端口,允许外部访问 EXPOSE 80 ``` 4. 在同一文件夹下创建一个名为`nginx.conf`的文件,并添加以下内容: ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 这个配置文件将Nginx监听80端口,并将所有请求转发到Vue项目的静态文件。 5. 将Vue项目的打包文件(通常在`dist`目录下)复制到同一文件夹下。 6. 打开终端,进入到该文件夹,并执行以下命令来构建和运行Docker容器: ``` docker build -t my-nginx . docker run -d -p 80:80 my-nginx ``` 第一条命令将根据`Dockerfile`构建一个名为`my-nginx`的镜像。第二条命令将在后台运行该镜像,并将容器的80端口映射到主机的80端口。 现在,您可以通过访问`http://localhost`来查看部署Vue项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值