前端工程的打包部署（这里用的nginx）

最新推荐文章于 2024-05-29 09:34:39 发布
最新推荐文章于 2024-05-29 09:34:39 发布
阅读量1.3k 收藏 5
点赞数
文章标签： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hey_Join/article/details/131164688
版权

1. 首先，需要将前端文件打包。这里使用的是visual.

在这里插入图片描述

2. 官网下载nginx

3.将打包好的前端文件放入nginx中的html文件夹

在这里插入图片描述
需要注意的是，在存储nginx的时候，不要有中文的路径

3. 双击nginx.exe就可以启动进程，但在使用前，需要修改一些配置

  1. 进入conf
  2. 打开ngix.conf
    在这里插入图片描述
    server为端口设置，如果使用的端口号被占用，可以在这里修改

location,为nginx进程启动后，需要在当前nigix文件存放的路径下，寻找要访问的路径，即访问打包的前端工程文件

Hey_米氏胡
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue前端项目部署之nginx配置.md
03-20
本文将详细介绍如何使用Nginx作为反向代理服务器来部署Vue前端项目，包括具体的步骤以及需要注意的关键点。 #### 二、确认Nginx配置完毕 在开始部署之前，首先要确保Nginx已经正确安装并配置好。可以通过以下方式...
前端门户nuxt部署文件和nginx代理配置.zip.zip
11-23
前端门户nuxt部署文件和nginx代理配置，仅供学习所用，不可以他用，谢谢
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84435838的博客
05-08 2796
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
前端开发者必备：Nginx部署前端项目，让你的Web应用快速、稳定、安全地运行
失忆老幺
04-04 8645
Nginx部署前端项目
如何打包一个包含 HTML 和配置文件的 Nginx 镜像
最新发布
weixin_44416039的博客
05-29 183
请注意，以上步骤只是一个基本示例，并不包括所有的场景和配置选项。根据您的需求，您可能需要进一步调整和优化 Dockerfile 和 Nginx 配置文件。通过这些步骤，您将能够打包一个包含 HTML 和自定义配置文件的 Nginx 镜像，并在容器中运行该镜像。
Nginx 打包上线 nginx.conf文件配置
路虽远行则将至，事虽难做则必成。
12-03 1320
打包上线其实就是，我们有一个服务器绑定了域名，然后在通过Nginx部署代码，这样就可以域名访问项目。在打包上线之前我们应该知道，开发常见的三种环境，本地环境，生产环境，测试环境。参考文章参考文章NginxNginx官网下载Nginx中文网Nginx配置中文参考手册实际应用1.我们现在实际情况是一个服务器绑定域名，只放一个项目的情况下。通过Nginx部署，域名进行访问项目。2.我们进行项目生产环境打包，在打包之后我们可以理解为Nginx的nginx.conf文件就相当于了我们本地开发环境的vue.config
使用nginx部署前端项目（超详细教程）
热门推荐
IT小辉同学
04-29 1万+
愿我们的付出都值得
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
qq_45796592的博客
09-26 1万+
nginx部署前端项目的详细步骤
【nginx】在本地部署前端项目:
SunPeng的博客
02-07 3433
【nginx】在本地部署前端项目:
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Angular项目从新建、打包到nginx部署全过程记录
08-28
在本文中，我们将深入探讨如何使用Angular框架创建一个新的项目，并将其打包部署到Nginx服务器。Angular是一个流行的前端JavaScript框架，它提供了强大的功能来构建现代Web应用程序。在讲解过程中，我们将按照新建...
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
前端ngnix部署
qq_44436509的博客
03-21 4723
worker进程的数量events {# 事件区块开始# 每个worker进程支持的最大连接数 } # 事件区块结束http {# HTTP区块开始# Nginx支持的媒体类型库文件# 默认的媒体类型# 开启高效传输模式# 连接超时server {# 第一个Server区块开始，表示一个独立的虚拟主机站点listen 80；# 提供服务的端口，默认 80 server_name localhost；# 提供服务的域名主机名# 第一个location区块开始root html。
Nginx基本使用以及部署前端项目
m0_52043522的博客
05-16 1万+
Nginx的基本使用、nginx.conf配置文件、负载均衡、部署前端项目。
10.前端打包与nginx部署
大李出奇迹的博客
09-18 721
首先，确保你的项目是可以运行的，以若依为例，运行npm run dev 是可以正常运行起来前端的。然后前端的打包命令是。打包好之后，在项目代码路径下会出现一个dist文件夹，这里面的代码粘贴到nginx的html目录下即可。然后将打包好的dist目录丢在nginx的html下面。然后重启docker的nginx虚拟容器。
使用nginx部署前端项目
lianaozhe的博客
11-25 5467
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
Nginx部署前端项目
吹灭读书灯 一身都是月的博客
05-21 8618
首先当然是检查Nginx： 查看nginx的安装路径：whereis nginx nginx: /usr/local/nginx nginx常用命令： cd /usr/local/nginx/sbin ./nginx ./nginx -s stop ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片： location /images { root /us
【运维】Linux安装Nginx并部署前端项目【内/外网-保姆级教程】
m0_64210833的博客
06-06 9787
Linux安装Nginx并部署前端项目的两种方式【内/外网-保姆级教程】
打包jar,jdk8,,mysql8,nginx成exe可安装应用，进行一键安装windows系统上
world_the_begin的博客
06-07 1793
打包jar,jdk8,,mysql8,nginx成exe可安装应用，进行一键安装windows系统上
前端项目怎么部署到nginx
05-09
部署前端项目到 Nginx 可以分为以下几个步骤： 1. 准备前端项目 将前端项目打包成静态文件，一般是一个包含 HTML、CSS、JS 和图片等资源的文件夹。 2. 安装 Nginx 在服务器上安装 Nginx，可以使用命令 `sudo apt-get install nginx` 在 Ubuntu 系统上安装。 3. 配置 Nginx 在 Nginx 的配置文件中添加对前端项目的访问配置。可以在 `/etc/nginx/sites-available` 目录下新建一个文件，例如 `myproject`，然后添加以下配置： ``` server { listen 80; server_name myproject.com; root /path/to/myproject; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 其中，`server_name` 是访问域名，`root` 是前端项目的路径，`index` 是默认首页文件，`location` 是请求路径的转发规则。 4. 启动 Nginx 启动 Nginx 服务，可以使用命令 `sudo service nginx start`，然后在浏览器中访问配置的域名，即可访问前端项目。 希望这些步骤可以帮助你成功地将前端项目部署到 Nginx 上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值