docker部署vue+nginx——篇三

上一篇讲解部署mysql(远程连接)+redis

在服务器上新建一下目录文件,dist文件夹就是vue打包的项目
在这里插入图片描述
nginx.conf配置,完整的配置文件你可以自己在本地下一个nginx.tar.gz复制里面的nginx.conf文件
在这里插入图片描述
cd 到blogVue目录下
构建镜像
docker build -t myvue .
. 不要少了
运行容器
docker run --name myvue -d -p 80:80 myvue

到此部署全部完成,但是bug有以下
1、跨域(请求头没有配置好,导致的结果就是sessionid不一致,以及访问页面都有问题,很严重)
2、图片找不到异常(我的图片存放路径是c:/my-user/下的三个文件夹,到服务器上就是/my-users/,导致用户的头像以及文章的图片、视频都不能访问了),这个比较偏门,我查了几天没有查到类似的文章,但还是突发奇想的解决了。
有需要的小伙伴可以看我的主页。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值