部署前端项目

常见部署方式有:静态托管服务、服务器部署

1. 静态托管服务

使用平台部署代码,比如 GitHub。

| 创建一个仓库,仓库名一般是 yourGithubName.github.io。

| 将打包后的静态文件文件上传到仓库。

| 在“Settings”(选项)选项卡中,找到“Pages”(页面)部分。

| 选择要部署的分支(通常是 main 分支)。

| 点击“Save”(保存)。

| GitHub 完成部署后,会在“Pages”部分显示部署成功的链接,您可以通过该链接访问您的静态网站。

 

2. 服务器部署

购买服务器,选择 Linux 服务器,操作系统选择 CentOS,安装 Nginx,配置服务器指向项目的静态文件目录。将前端打包文件上传到指定目录。配置 Nginx。Nginx 的配置文件通常位于 /etc/nginx/sites-available/ 目录下。创建一个新的配置文件,例如 your_domain.conf。配置如下:

server {listen 80;  # 监听 80 端口,您也可以根据需求修改为其他端口server_name your_domain.com;  # 替换为您的域名root /path/to/your/frontend/files;  # 替换为前端项目文件的实际路径location / {try_files $uri $uri/ /index.html;  # 确保任何请求都能正确加载到 index.html}}

启用配置:创建一个符号链接将配置文件从 sites-available 目录链接到 sites-enabled 目录:

sudo ln -s /etc/nginx/sites-available/your_domain.conf /etc/nginx/sites-enabled/

检查配置:使用以下命令检查配置是否正确:

sudo nginx -t

重新加载 Nginx 使配置生效:

sudo systemctl reload nginx

例如,如果您的前端项目文件位于 /var/www/your_project ,域名是 example.com ,配置文件可能如下:

server {listen 80;server_name example.com;root /var/www/your_project;location / {try_files $uri $uri/ /index.html;}}

在 Nginx 中部署两个前端项目。打开 Nginx 的配置文件,通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。添加两个 server 块来分别配置两个项目。

server {listen 8080;  # 第一个项目监听 8080 端口server_name project1.example.com;  # 项目 1 的域名root /path/to/project1;  # 项目 1 的根目录index index.html;  # 项目 1 的默认索引文件location / {try_files $uri $uri/ /index.html;}}server {listen 8081;  # 第二个项目监听 8081 端口server_name project2.example.com;  # 项目 2 的域名root /path/to/project2;  # 项目 2 的根目录index index.html;  # 项目 2 的默认索引文件location / {try_files $uri $uri/ /index.html;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3224623.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

初始化线程的4种方式

1. 继承Thread 缺点:无法获取线程的运算结果。 public class ThreadTest{public static void main(String[] args){Thread01 thread new Thread01();thread.start();}public static class Thread01 extends Thread{public void run(){System.out.println("当前…

PageDTO<T>,PageQuery,BeanUtils,CollUtils的封装

一、PageDTO<T> import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.fasterxml.jackson.annotation.JsonIgnore; import com.tianji.common.utils.BeanUtils; import com.tianji.common.utils.CollUtils; import com.tianji.common.utils.…

koa + http-proxy-middleware 搭建一个带转发的静态服务器

背景 由于工作中碰到写普通页面&#xff08;未使用脚手架&#xff09;&#xff0c;需要发起接口请求&#xff0c;但普通页面又无法对接口发起正常请求&#xff0c;故编写一个Koa搭建的带转发功能的静态服务器。 起步 新建一个文件夹&#xff0c;在文件夹下打开 cmd 或者 git …

AI提示词:AI辅导「数学作业」

辅导孩子作业对许多家长来说可能是一件头疼的事&#xff0c;但这部分工作可以在一定程度上交给AI来完成。 打开ChatGPT4,输入以下内容&#xff1a; # Role 数学辅导专家## Profile - author: 姜小尘 - version: 02 - LLM: Kimi - language: 中文 - description: 专门为小学生…

iOS 开发技巧 - 使用本地 json 文件

前言 使用本地 json 文件的场景&#xff0c;在我们开发功能的阶段&#xff0c;服务端接口字段定义好了后&#xff0c;有些接口响应很慢&#xff0c;请求到响应可能要 几十秒甚至一分钟&#xff0c;我们需要频繁调用接口来调试功能&#xff1b;还有就是调用一些我们需要付费的三…

宿州降本 提质 增效 数据采集监控平台提高生产自动化水平

在当今竞争激烈的市场环境中&#xff0c;企业追求降本、提质、增效已成为发展的关键。而我们的[数据采集监控平台名称]数据采集监控平台&#xff0c;正是助力企业实现这一目标的强大工具。 LP-SCADA数据采集监控平台是工业4.0中主要的数据采集系统之一&#xff0c;主要针对产线…

限流组件都有哪些

限流组件有很多&#xff0c;下面是一些常见的限流组件&#xff1a; 1.Sentinel&#xff1a;轻量级的流量控制、熔断降级组件&#xff0c;适用于分布式系统间的流量控制、负载保护和系统防护。 1.Guava RateLimiter&#xff1a;Google 的 Guava 库提供的限流器&#xff0c;基于令…

基于STM32的智能加湿器

1.简介 基于STM32的加湿器发展前景非常乐观&#xff0c;这主要得益于其在技术、市场需求、应用场景以及政策支持等多方面的优势。STM32微控制器具备强大的处理能力和丰富的外设接口&#xff0c;能够实现精确的湿度监测和智能化控制。基于STM32的加湿器可以根据环境湿度自动调节…

2-29 基于matlab的CEEMD

基于matlab的CEEMD&#xff08;Complementary Ensemble Empirical Mode Decomposition&#xff0c;互补集合经验模态分解&#xff09;&#xff0c;先将数据精心ceemd分解&#xff0c;得到imf分量&#xff0c;然后通过相关系数帅选分量&#xff0c;在求出他们的样本熵的特征。用…

JAVA从入门到精通之入门初阶(一)

1. 认识变量 一、 首先变量名要遵循如下命名规则&#xff1a; 1. 变量名只能由字母、数字和下划线组成 2. 变量名必须以字母或下划线开头 3. 变量名大小写敏感 4. 变量名不能使用关键字&#xff0c;如const、static等 5. 变量名应具有描述性&#xff0c;以便于代码的可读性…

【人工智能】-- 搜索技术(状态空间法)

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f348;介绍 &#x1f349;状态空间法 &#x1f348;状态空间的构成 &#x1f34d;状态 &#x1f34d;算符…

【深度学习】第5章——卷积神经网络(CNN)

一、卷积神经网络 1.定义 卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种专门用于处理具有网格状拓扑结构数据的深度学习模型&#xff0c;特别适用于图像和视频处理。CNN 通过局部连接和权重共享机制&#xff0c;有效地减少了参数数量&#x…

溶解氧(DO)理论指南(2)

转载自梅特勒官网资料&#xff0c;仅用于学习交流&#xff0c;侵权则删&#xff01; 溶解氧理论指南 2 DO电极类型2.1 氧化还原化学简介2.2 原电池法溶解氧电极2.3 极谱法溶解氧电极2.3 光学法溶解氧电极 2 DO电极类型 O2是一种高活性分子&#xff0c;因为它是通过光合作用连…

UI组件库---vantList组件接口多次调用大坑问题

问题描述&#xff1a;当使用refesh下拉操作时&#xff0c;vanlist组件会多次调用&#xff08;大概三次&#xff09;&#xff01; 解决方案&#xff1a; 1、接口错误的时候&#xff0c;大量重复请求。 可能接口错误时vant3内部某些变量没重置&#xff0c;导致一直重复请求&am…

QT文件生成可执行的exe程序

将qt项目生成可执行的exe程序可按照以下步骤进行&#xff1a; 1、在qt中构建运行生成.exe文件&#xff1b; 2、从自定义的路径中取出exe文件放在一个单独的空文件夹中&#xff08;exe文件在该文件夹中的release文件夹中&#xff09;&#xff1b; 3、从开始程序中搜索qt&#xf…

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析 由北京海特伟业科技有限公司任洪卓于2024年7月9日发布 随着科技的飞速发展&#xff0c;特别是“互联网”战略的深入推进&#xff0c;高铁站客运枢纽的信息化建设成为提升服务质量、增强乘客体验的重要手段。盐…

Effective C++笔记之二十一:One Definition Rule(ODR)

ODR细节有点复杂&#xff0c;跨越各种情况。基本内容如下&#xff1a; ●普通&#xff08;非模板&#xff09;的noninline函数和成员函数、noninline全局变量、静态数据成员在整个程序中都应当只定义一次。 ●class类型&#xff08;包括structs和unions&#xff09;、模板&…

能源电子领域2区SCI,版面稀缺,即将截稿,无版面费!

【SciencePub学术】今天小编给大家推荐1本能源电子领域的SCI&#xff01;影响因子1.0-2.0之间&#xff0c;最重要的是审稿周期较短&#xff0c;对急投的学者较为友好&#xff01; 能源电子类SCI 01 / 期刊概况 【期刊简介】IF&#xff1a;1.0-2.0&#xff0c;JCR2区&#xf…

互联网医院系统,开发互联网医院设计哪些功能?

随着科技的进步和数字化转型的推动&#xff0c;互联网医院系统已成为现代医疗服务的重要组成部分。这一系统通过整合信息技术与医疗资源&#xff0c;为用户提供便捷、高效的医疗服务。以下是互联网医院系统的主要功能介绍。 1、在线咨询与诊断 互联网医院系统允许患者通过网络平…

Python30 使用Gensim库实现Word2Vec对文本进行处理

1.Word2Vec Word2Vec 是一种将词语表示为向量的技术&#xff0c;能够捕捉词语之间的语义关系。它由 Google 的 Tomas Mikolov 等人在 2013 年提出&#xff0c;广泛应用于自然语言处理任务中。其核心概念主要包括&#xff1a; 词嵌入&#xff08;Word Embeddings&#xff09; …