Docker+nginx部署静态页面

1.搜索安装的 nginx 镜像

docker search nginx

2.在docker hub 中选择合适的版本后进行 镜像拉取

 docker pull nginx

3.拉取完成后运行 nginx 容器

​ 使用 xftp 上传静态页面到服务器的/usr/html 目录下

docker run -di --name=nginx -p 90:80 -v /usr/html:/usr/share/nginx/html nginx
# -d 后台运行
# -i 交互方式运行
# --name 自定义容器名称
# -p 端口号映射 90 自定义为外部访问端口:80 为nginx容器对外暴露的端口
# -v 目录挂载  冒号前为 外部目录,冒号后为 容器内目录;相当于外部目录中的内容会映射同步到容器内

4.访问运行好的容器

 ip:90          ip为当前服务器ip地址

5.进入到容器命令

docker exec -it container-id/container-name bash
# container-id     容器id
# container-name   自定义容器名称

6.进入到容器的指定位置查看配置

cd /etc/nginx/conf.d/

可以看到默认的配置文件:

cat default.conf 
server {
    # 默认监听 80 端口
    listen       80;
    # localhost 为外部访问该地址的域名   域名解析指向---> NGINX 配置文件所在服务器
    server_name  localhost;
    
    # 这里为本地代理,当外部访问 server_name 域名的时候 就会转到以下代理地址
    #1ocation / {
    #     proxy_pass http://192.168.0.243:8778;
	#}

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    # nginx 的默认访问文件夹为 root  /usr/share/nginx/html
    # nginx 的默认访问页面为  index  index.html  index.htm
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值