nginx部署前端dist包

于 2024-08-29 00:15:00 发布
阅读量557 收藏 2
点赞数 10
文章标签： nginx 前端 运维 部署 项目打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42554330/article/details/141232189
版权

下载nginx

下载地址

https://nginx.org/en/download.html

download > Stable version 可选择稳定版的nginx
在这里插入图片描述
nginx压缩包解压后的目录
在这里插入图片描述

配置

1.将打包好的dist放入html目录下
在这里插入图片描述
2.打开nginx.conf配置文件
在这里插入图片描述
修改地址

location / {
    root   html/dist;
    index  index.html index.htm;
}

在这里插入图片描述

启动

1.双击启动nginx
在这里插入图片描述
2.打开浏览器输入地址打开项目 http://localhost:8083/
在这里插入图片描述

来一颗砂糖橘
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Nginx 部署前端项目dist文件
luo0617的博客
07-13 4495
Nginx代理部署上线前端项目
前端在nginx上部署vue的dist包，配置跨域问题
weixin_63029264的博客
01-11 2261
一般为位置为 /usr/local/nginx/conf/ ,如果知道你服务器的配置文件位置，那我们直接切进去。这边让我们输入密码，输入密码时候是不可见的 所以输入直接敲回车 正确就直接进去了，错了就重新来过。找到nginx安装的目录下的 /sbin 文件夹，我的是在 /conf的同级目录。根据需要进行启动配置。
Nginx部署前端项目尝试 - windows版
lsk222的博客
07-19 319
前端自己部署前端代码
Nginx部署前端dist文件夹
m0_60789072的博客
01-29 4729
如需重命名 请注意后续安装Nginx所生成的文件夹名称是否冲突，避免文件覆盖。注：然后回车，如果编译出错，请检查是否前面的环境安装都没有问题。安装成功后，这时候返回上一级目录，就会发现多了nginx目录。保存配置文件后，需要重启linux。​ 2.wget命令下载。Linux修改文件名。使用默认配置，然后回车。​ 1.本地下载上传。将dist文件夹放在。
Linux中安装Nginx并部署前端dist文件
狮子看电视
09-23 6448
Linux系统下nginx的离线安装 nginx的离线安装包下载 nginx离线安装包官网下载地址：链接: http://nginx.org/en/download.html. Mainline version：Mainline 是 Nginx 目前主力在做的版本，可以说是开发版 Stable version：最新稳定版，生产环境上建议使用的版本 Legacy versions：遗留的老版本的稳定版 这里下载的是linux版本的最新稳定版本nginx-1.18.0.tar.gz 下载完成后..
nginx 部署前端vue项目dist文件
苏谨
11-04 1712
nginx 部署前端页面。
Docker部署Nginx&&发布前端dist包
z_xiaoluan的博客
11-15 1798
docker部署nginx
用Nginx部署前端项目
qq_69503426的博客
04-19 1111
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
前端在nginx部署vue项目dist包
weixin_44927143的博客
07-08 4433
第一步：下载nginx压缩包 在这里可以去nginx官网下载->点我下载nginx 也可以直接使用wget命令下载，指令如下所示（请根据自己的需求进行下载） wget -c https://nginx.org/download/nginx-1.20.1.tar.g 注意：这一步最好在自己的目标目录进行操作，我一般是把压缩包下载到/usr/local目录下。 第二步：配置nginx安装所需的环境 yum -y install gcc gcc-c++ autoconf automake make yum
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 2390
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7139
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 331
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
谷歌、火狐及Edge等浏览器如何使用allWebPlugin中间件响应ActiveX插件事件
云开软件工作室
08-25 613
如何通过allWebPlugin中间件技术，在谷歌、火狐、Edge及360等浏览器中响应ActiveX控件的事件。JavaScript调用PluginHostCnt类RegisterEvent方法，注册需要响应的控件事件，如果需要响应多个事件，事件与事件之间通过分号（;）隔开；使用JavaScript编写事件响应函数，响应函数参数需要与ActiveX控件事件函数参数一致。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1382
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
浏览器精度问题
m0_46281382的博客
08-25 528
浏览器如何解析后端返回的long类型的数据
前端：篮球投掷动画
懒羊羊大王的博客
08-23 1080
使用 H5 和 CSS3 实现的一个篮球投掷动画。 玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
WebRTC 实时通信：构建高效网页视频通话的秘诀
liuxin33445566的博客
08-24 686
WebRTC 是一个开源项目，由Google于2010年启动，旨在通过简单的API实现浏览器间的实时音视频通信。它允许开发者在网页应用中轻松集成音视频通话、文件共享、屏幕共享等功能。
docker部署nginx配置前端dist
09-19
docker部署nginx配置前端dist的步骤如下： 1. 编写Dockerfile，设置基础镜像为nginx:alpine，并将dist文件中的内容复制到/app/dist目录下： ``` # 设置基础镜像 FROM nginx:alpine # 将dist文件中的内容复制到/app/dist目录下 COPY dist/ /app/dist # 用本地的default.conf配置文件替换nginx镜像里的默认配置 COPY default.conf /etc/nginx/conf.d/default.conf ``` 2. 编写nginx配置文件default.conf，配置前端的访问规则和代理转发规则： ``` upstream backendapi { server backend-api:9527; } server { listen 80; server_name localhost; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /app/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location /api/ { rewrite /api/(.*) /$1 break; proxy_pass http://backendapi; } } ``` 3. 执行以下命令制作镜像： ``` # 把Dockerfile、default.conf、dist放在同级目录下 # 创建容器 docker build -t frontend/web . # 给容器打上标签 docker tag frontend/web:latest harbor/frontend/web:latest # 登录harbor容器仓库 docker login harbor # 输入账号密码 # 推送打上标签的容器到harbor仓库 docker push harbor/frontend/web:latest ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来一颗砂糖橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值