Nginx安装部署前端项目

最新推荐文章于 2025-03-20 16:22:16 发布

start 有点帅

最新推荐文章于 2025-03-20 16:22:16 发布

阅读量145

点赞数 2

文章标签： tomcat nginx linux

本文链接：https://blog.youkuaiyun.com/weixin_48043343/article/details/129389090

版权

安装nginx参考(203条消息) LINUX安装nginx详细步骤_大蛇王的博客-优快云博客

将前端项目打包dist放到指定目录（/home/dist）

修改/usr/local/nginx/conf/nginx.conf文件

4.启动服务

 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

或者重启服务

./nginx -s reload

5.lsof -i:8805 查看你监听的端口

6.ip加端口访问前端页面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

start 有点帅

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

利用nginx简单部署前端项目

uncle_Huang的博客

06-04

1897

情况描述：前端项目是vue项目，把项目打包后部署到服务器上，服务器是linux系统。需要用到的软件：Xshell，Xftp 适用对象：前端小白（大佬们就不要看了，写得一般般，羞羞）首先本地用Xshell连接服务器打开Xshell，点击文件-》新建填写名称、主机和端口号。点击用户身份验证，方法默认password，填写用户名和密码，点击确定。连接后，查看服务器有没有安装nginx，输入 find / -name nginx 如果安装了，输入后按回车键，会显示nginx的安装路径，如下图

docker 安装 nginx 部署Vue前端项目

weixin_48568302的博客

03-18

1332

docker 安装 nginx 部署Vue前端项目

参与评论您还未登录，请先登录后发表或查看评论

使用 Nginx部署前端项目

blue_121的博客

05-23

3200

windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。

前端项目部署在 Nginx 中自定义配置文件和项目路径详解

最新发布

cuijiying的博客

03-20

2021

讲解如何将你的前端项目部署在 Nginx 中，并且自定义 Nginx 配置文件和前端项目路径的位置。首先，确保你的服务器上已经安装了 Nginx。如果需要 HTTPS，需要配置 SSL 证书并修改配置文件，这可以参考 Nginx 官方文档或后续教程。安装完成后，可以通过浏览器输入服务器的 IP 地址，检查是否看到 Nginx 的默认欢迎页面。Nginx 需要知道你的自定义配置文件位置，因此需要修改主配置文件。

Nginx部署前端项目

qq_62231627的博客

09-08

371

一款高性能的开源Web服务器和反向代理服务器

nginx部署前端项目

Natsu的博客

05-26

260

Nginx原生部署 1、安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2、解压nginx的tar包 tar -zxvf nginx-1.16.1.tar.gz 3、安装nginx 安装到 /data/zhangqiuxia/nginx-zqx-21122路径下，默认端口为80，修改为21122 cd /data/zhangqiuxia/nginx-1.16.1 sed -i 's/listen

使用nginx部署前端项目

lianaozhe的博客

11-25

5885

使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。

使用nginx部署前端项目（超详细教程）.pdf

04-29

【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...

web服务器nginx+部署前端vue项目

03-22

#### 三、部署前端 Vue 项目至 Nginx 假设我们需要将一个基于 Vue.js 的前端项目部署到 Nginx 上，下面是一些基本的步骤： 1. **准备环境**： - 安装 Nginx。确保你的系统上已经安装了 Nginx 服务器。 - 准备好...

【Nginx 】Nginx 部署前端 vue 项目

m0_74825746的博客

01-17

1536

在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。

Nginx 部署前端 Vue 项目实战指南

miracle的专栏

09-02

2647

在执行此命令之前，需要确保路由配置中的模式正确。修改完成后，保存配置文件，并在命令行中执行相应命令重启 Nginx 服务。您可以从 Nginx 官方网站下载安装包，然后按照安装向导进行安装。，回车，即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。从 Nginx 官方网站下载安装包，按照安装向导进行安装。另外，还需要对项目中的一些配置文件进行修改，比如在。要修改 Nginx 的配置文件，例如修改端口，可在。指令，将默认的 80 端口修改为您想要的端口，如。

nginx部署前端项目详细教程

太阳与星辰的博客

09-06

9003

本文主要讲述了使用nginx打包部署前端项目的整套流程。

前端开发者必备：Nginx部署前端项目，让你的Web应用快速、稳定、安全地运行

失忆老幺

04-04

1万+

Nginx部署前端项目

如何通过Nginx部署前端项目？

weixin_43714426的博客

03-16

413

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表欢迎使用Markdown编辑器首先，确保nodejs环境变量没有问题： nodejs下载地址环境变量配置新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下

nginx部署前端项目完整步骤（非容器化部署）

一枚小爪哇(Java)的博客

03-07

2652

nginx部署前端项目完整步骤（非容器化部署）

nginx 部署前端项目

热门推荐

Amazing66的博客

12-27

1万+

1、首先将前端项目打包放在服务器上 2、修改nginx 配置文件

nginx 前端启动

萝卜芹菜芽

03-05

803

root alias

Nginx本地启动前端Vue项目

TVM的博客

06-08

1743

nginx -c filename #设置配置文件(默认是:/etc/nginx/nginx.conf)nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx。nginx -p prefix #设置前缀路径(默认是:/usr/share/nginx/)nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）nginx -s stop #强制停止Nginx服务。nginx -s reopen #重启Nginx。,-h #打开帮助信息。

docker安装nginx并部署前端项目

12-28

### 使用 Docker 安装 Nginx 并部署前端应用 #### 获取 Nginx 镜像为了开始，需先获取官方的 Nginx 镜像。这可以通过执行 `docker pull nginx` 来完成，该命令默认下载最新的稳定版 Nginx 镜像[^1]。对于特定版本的需求，则可以使用带有版本标签的拉取指令，例如 `docker pull nginx:1.21.6` 用于获取指定版本的镜像。 #### 创建并启动 Nginx 容器一旦拥有所需的 Nginx 镜像，在本地环境中创建一个新的容器实例变得简单。通常情况下，会利用如下命令来运行一个新容器： ```bash docker run --name my-nginx -v /path/to/html:/usr/share/nginx/html:ro -p 80:80 -d nginx ``` 上述命令中 `-v` 参数用来挂载主机上的静态文件目录至容器内的 `/usr/share/nginx/html` 路径下；而 `-p` 则映射了宿主机端口与容器内部的服务端口，使得外部能够访问到由 Nginx 提供的内容[^4]。 #### 准备前端项目资源构建好的前端应用程序应当被打包成生产环境可用的形式——一般位于项目的根目录下的 `dist` 文件夹内。确保这个文件夹包含了所有必要的 HTML、CSS 和 JavaScript 文件以及其他任何依赖项。 #### 更新配置文件（可选）如果需要自定义 Nginx 的行为或优化性能参数，可能还需要调整其配置文件。可通过复制现有容器中的配置作为模板来进行修改，并再次将其替换回容器中: ```bash docker cp container_name:/etc/nginx/nginx.conf ./local/path/ # 修改 local/path/nginx.conf 后... docker cp ./local/path/nginx.conf container_name:/etc/nginx/nginx.conf ``` 这里假设 `container_name` 是之前创建的那个 Nginx 容器的名字[^3]。 #### 测试部署成果最后一步是验证一切设置无误。打开浏览器输入服务器 IP 地址或者域名加上对应的端口号(如果是非标准 HTTP(S) 端口)，应该能看到已成功加载的前端页面。