docker nginx 部署静态网站

1、dockerfile

FROM nginx AS base

WORKDIR /app

EXPOSE 80

COPY . /app

2、dockercompose.yaml

version: '3'
services:
  adminservice:
    container_name: adminweb
    build:
      context: ./
      dockerfile: Dockerfile
    ports:
      - "5000:80"
    labels:
        description: 'adminweb'
    restart: always

3、运行dockercompose.yaml后,找到nginx配置文件/etc/nginx/nginx.conf
4、在access_log 后面增加配置

    server
    {
        listen 80; #监听的端口
        server_name localhost; #server_name 以localhost访问,server_name 写成127.0.0.1则需要以127.0.0.1访问(宝塔网站配置要以ip,自行在配置文件中修改成localhost则以名称访问)
        index index.html index.htm default.htm default.html;
        root /app; #网站根目录
    }

5、以http://localhost:5000访问docker中部署的网站

Vue项目的Docker+Nginx部署可以通过以下步骤完成: 1. 创建Dockerfile:在Vue项目的根目录下创建一个名为Dockerfile的文件,内容如下: ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 WORKDIR /app # 复制package.json和package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 复制所有文件到工作目录 COPY . . # 构建项目 RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21-alpine # 将构建好的项目复制到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 复制Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 创建Nginx配置文件:在Vue项目的根目录下创建一个名为nginx.conf的文件,内容如下: ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 3. 构建Docker镜像:在终端中进入Vue项目的根目录,执行以下命令构建Docker镜像: ``` docker build -t vue-app . ``` 其中,`vue-app`是镜像的名称,可以根据需要自行修改。 4. 运行Docker容器:执行以下命令运行Docker容器,并将容器的80端口映射到主机的指定端口(例如8888): ``` docker run -d -p 8888:80 vue-app ``` 其中,`8888`是主机的端口号,可以根据需要自行修改。 至此,Vue项目的Docker+Nginx部署就完成了。你可以通过访问`http://localhost:8888`来查看部署后的项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值