Docker使用Nginx部署前段Vue项目

于 2024-10-22 10:13:30 发布
阅读量972 收藏 20
点赞数 16
文章标签： docker nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2403_87298407/article/details/143139471
版权

目录

docker拉取Nginx镜像

docker启动Nginx镜像

根据自己的ip+端口号就可以访问了，我这边的端口号是8081，注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）

随便拉取一个前台项目,一定要保证项目能够成功运行,然后跑起来

之后输入输入npm run build 进行打包vue项目

我这里打包的命令输入的是 npm run build 根据自己的版本看看打包的命令是什么版本一般在这里:

打开自己的项目文件查看是否有dist,如果有就代表打包成功

将dist文件拖到服务器任意位置(我这里拖到opt下了)

首先进去opt文件下

在opt文件夹输入命令创建并编辑default.conf文件

将以下代码放入conf文件中

在opt文件夹输入命令创建并编辑Dockerfile文件

将一下以下代码放到代码块中

生成项目docker镜像文件（务必要进入opt文件中）

启动生成的Docker镜像文件

输入自己的ip+端口号就可以访问项目(手机上也可以正常访问)

docker拉取Nginx镜像

# 拉取镜像
docker pull nginx
# 查看镜像
docker images

​

docker启动Nginx镜像

#启动镜像
docker run --name nginx-test -p 8081:80 -d nginx:latest
# 查询容器
docker ps

根据自己的ip+端口号就可以访问了，我这边的端口号是8081，注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）

随便拉取一个前台项目,一定要保证项目能够成功运行,然后跑起来

之后输入输入npm run build 进行打包vue项目

我这里打包的命令输入的是 npm run build 根据自己的版本看看打包的命令是什么版本一般在这里:

打开自己的项目文件查看是否有dist,如果有就代表打包成功

最低0.47元/天 解锁文章
晚风 -
关注
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 6085
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
docker 安装 nginx 部署Vue前端项目
weixin_48568302的博客
03-18 1299
docker 安装 nginx 部署Vue前端项目
vue前端使用Docker部署
fly_duck的博客
06-14 3045
使用docker发布vue前端项目
Docker+Nginx部署vue项目
m0_46219714的博客
04-14 1071
这篇文章给大家分享一下如何使用Docker+Nginx部署前端vue项目。
Docker 安装 Nginx 容器部署前端项目
FLGB
03-19 4155
docker运行nginx镜像时，设置端口映射，则只有该映射端口起作用，nginx配置的其他端口无效。所以想要多个端口起效果，启动时要用–net host （先删除容器后重新生成），并且修改配置文件中的root路径，再次访问成功加载首页。docker下的nginx只能读到挂载路径下面的文件（到对应目录下查看文件已经存在了（划红线的）删除成功后，重新生成容器并进行目录挂载映射。我们拉去1.24.0的nginx镜像。在对应挂在目录下创建监听文件。
docker 部署多个前端vue项目
Gblfy_Blog
11-27 4160
docker 部署多个前端vue项目
手把手教你Docker+nginx部署Springboot+vue前后端分离项目
2401_86963632的博客
09-06 1498
公众号同名。其实我觉得我已经录制得很详细的了，可能大家水平不一，有些人觉得我很多地方讲清楚，还有就是有些人按照视频同步做实验，还一路踩坑，这个我也预料不到哈哈。说实话，我自己做实验的过程还是挺顺利的。有些同学们提出个问题，不知道如何打包部署Vue前后端分离项目。那么今天，我们就来学习一下，如何部署简单快捷部署我们的vueblog项目！名称：[实战]基于SpringBoot+Vue开发的前后端分离博客项目完整教学（vueblog）
VUE 项目用 Docker+Nginx进行打包部署
CC酱写前端的博客
06-18 3206
这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。命令重新启动它，这次使用正确的端口映射。端口，你需要确保 Docker 容器的端口映射也相应地设置为。：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为。目录中的所有文件复制到 Nginx 的默认网页根目录。： 首先，你需要找到容器的 ID 或名称。命令加上容器的 ID 或名称来停止容器。这将覆盖默认的 Nginx 配置。命令列出所有正在运行的容器。
轻松Docker+Nginx 部署Vue前端项目
aapprentice的博客
03-01 642
通过dockfile创建镜像,再通过镜像创建并运行容器,再修改nginx配置文件,即可轻松部署vue项目
Docker安装Nginx并部署vue项目
qq_41541368的博客
02-04 1730
拉取 Nginx 镜像 docker pull nginx 查看本地镜像 docker images 运行容器 docker run --name nginx -p 8080:80 -d nginx –name nginx：容器名称。 -p 8080:80： 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。 -d nginx： 设置容器在在后台一直运行。 访问端口 通过浏览...
Docker部署Nginx+Vue项目
qq_33930691的博客
05-14 1125
使用Docker部署Nginx+Vue项目
在Docker中使用nginx托管vue应用程序
Marionxue
12-28 218
## 小目标 使用Vue框架创建一个网站，掌握如何使用nginx在Docker容器中提供服务。 首先，我们将使用Vue CLI生成入门Vue应用程序，我们将这个应用命名`vue-nginx-docker` ```vue npx @vue/cli create vue-nginx-docker ``` 创建应用程序后，进入到新的应用程序文件夹 ```bash cd vue-nginx-docker ``` 现在我们需要几个文件才能与Docker一起使用：`Dockerfile`和一个`.docke
docker 部署前端Vue项目
linjun20的博客
05-11 2097
1.创建vue项目并编译打包 编译打包 npminstall npmrunbuild 在dist目录即可看到编译之后打包的文件 注意 添加vue项目上下文 vue.config.js中添加publicPath module.exports={ transpileDependencies:["uview-ui"], publicPath:"/hello/" }; xxxx.xxxx/ng-hello:v1 { "name":"hel...
Docker 部署前端项目 (vue)
weixin_48770699的博客
09-30 5784
Docker 部署前端项目 Vue 项目部署
Docker部署Vue前端项目
Major_S的博客
04-13 530
Vue前端项目镜像构建与部署Vue前端项目镜像构建与部署Vue前端项目镜像构建与部署
前端vue项目服务器部署(docker)
m0_46122129的博客
09-07 1957
将你的nginx-alpine.tar包上传到服务器上。假设路径为 。 2、导入 Nginx Docker 镜像 使用以下命令将 文件加载为 Docker 镜像： 执行后会显示类似如下的输出，表示镜像已成功加载： 3、验证镜像是否加载 确认镜像已经导入成功： 应该可以看到 镜像在列表中。在你的服务器上确保 目录下包含以下内容：- ：Vue 项目构建后的静态文件。- ：自定义的 Nginx 配置文件。- 。确保 目录中有你的 Vue 项目的打包内容。在 下编写或确保已经有如下内容的 ： 3、编写ng
2024年前端最新Docker 安装 Nginx 部署前端项目_docker安装nginx(2)，2024年最新学生会面试题选择题
2401_84435885的博客
05-13 853
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】`-it` 以交互式进入容器 ，`bash`保留为容器终端的输入形式，所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用)!`/etc/nginx/nginx.conf`是nginx的主配置文件，具体内容留在后一章节再说吧。`/etc/nginx/conf.d`下的default.conf 就是默认 server 配置。
使用docker在服务器上部署Vue前端项目
weixin_45796808的博客
08-14 1914
使用docker在服务器上部署Vue前端项目 1，将vue项目打包 #安装 npm install #打包 npm run build 注：具体打包命令要看vue项目根目录下package.json文件中怎么定义 比如下图，则打包命令为 npm run build:prod 2，将项目传递至gitee git add . git commit -m "ok" git push origin master 3, 在服务器中下载项目到本地 git clone https: //XXXXXXXXXXXXXX
使用docker部署nginx部署vue项目
最新发布
05-08
好的，我现在需要回答用户关于如何使用Docker部署包含Vue项目的Nginx容器的问题。首先，我得整理一下用户提供的引用内容，看看有哪些步骤和配置可以参考。用户引用了多个不同的Docker部署方法，每个引用中的命令略有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值