部署前端项目

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

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://www.mzph.cn/pingmian/44007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言编程4:复合赋值,递增递减运算符,局部变量与全局变量,本地变量,转义字符

一篇文章带你玩转C语言基础语法4:复合赋值,递增递减运算符,局部变量与全局变量,本地变量,转义字符 一、复合赋值🌿 1.1💠定义 赋值就是给任意一个变量或者常量赋一个值,这个值可以…

javaweb零碎知识3

// 假设您已经导入了 axios import axios from axios;// 获取表单元素 const form document.getElementById(myForm);// 为表单添加 submit 事件监听器 form.addEventListener(submit, function(e) {// 阻止表单的默认提交行为e.preventDefault();// 创建 FormData 对象并从表…

福建 | 南安帝兴混凝土电子签收的困难和突破

01 发展从来都是从困难开始 混凝土发货单实现无纸化签收,众多业内人士认为这个概念很好,但能否落地却大多抱有怀疑态度,理由多种多样: “行业太传统,接受不了新鲜事物。” “驾驶员年龄偏大,玩不来智能手…

【分布式系统管理框架】Zookeeper集群

1、Zookeeper (1)Zookeeper定义 Zookeeper是一个开源的,为分布式框架提供协调服务的Apache项目。 (2)Zookeeper工作机制 Zookeeper从设计模式角度来理解:是一个基于观察者模式设计的分布式服务管理框架…

怎么制作gif动图,视频制作GIF动画更简单

在社交媒体和网络交流中,GIF动画以其生动活泼的表现形式成为了表达情感、幽默和创意的热门媒介。无论是分享日常趣事,还是制作专业演示,一个恰到好处的GIF动图总能吸引目光,传递信息。 但你知道吗?即使没有专业的设计背…

工业一体机为数字化工厂带来高效作业指导

随着工业4.0的浪潮席卷全球,数字化工厂的概念深入人心。在这一背景下,工业一体机作为数字化转型的重要一环,凭借其强大的功能和灵活的应用,为工厂实现高效作业指导提供了强大的助力。 一、工业一体机的优势:赋能数字化…

2024年全国青少年信息素养大赛图形化编程小高组复赛真题

2024年全国青少年信息素养大赛图形化编程小高组复赛真题 题目总数:6 总分数:100 编程题 第 1 题 问答题 请对变身鱼进行编程,变身鱼的初始状态已经设置,不需要进行修改, 1.当变身鱼大小大于300时&#xff0…

数据高效交互丨DolphinDB Redis 插件使用指南

DolphinDB 是一个高性能的分布式数据库。通过 Redis 插件,DolphinDB 用户可以轻松地与 Redis 数据库进行交互。用户不仅可以从 DolphinDB 向 Redis 发送数据,实现高速的数据写入操作;还可以从 Redis 读取数据,将实时数据流集成到 …

PaddleVideo:Squeeze Time算法移植

参考PaddleVideo/docs/zh-CN/contribute/add_new_algorithm.md at develop PaddlePaddle/PaddleVideo GitHubAwesome video understanding toolkits based on PaddlePaddle. It supports video data annotation tools, lightweight RGB and skeleton based action recognitio…

17集 如何用ESP-IDF编译ESP-DL深度学习工程-《MCU嵌入式AI开发笔记》

17集 如何用ESP-IDF编译ESP-DL深度学习工程-《MCU嵌入式AI开发笔记》 参考文档:ESP-DL 用户指南: https://docs.espressif.com/projects/esp-dl/zh_CN/latest/esp32/index.html 和https://docs.espressif.com/projects/esp-dl/zh_CN/latest/esp32/get-s…

PHP禁止IP访问和IP段访问(代码实例)

PHP禁止IP和IP段访问 实现IP限制是Web开发中常见的需求之一&#xff0c;它可以用于限制特定IP地址的访问权限。在PHP中&#xff0c;我们可以通过一些方法来实现IP限制。 <?//禁止某个IP$banned_ip array ("127.0.0.1",//"119.6.20.66","192.168.…

C#中简单Socket编程

C#中简单Socket编程 Socket分为面向连接的套接字(TCP套接字)和面向消息的套接字(UDP 套接字)。我们平时的网络编程是对Socket进行操作。 接下来&#xff0c;我用C#语言来进行简单的TCP通信和UDP通信。 一、TCP通信 新建项目SocketTest&#xff0c;首先添加TCP通信的客户端代…

71.WEB渗透测试-信息收集- WAF、框架组件识别(11)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;70.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;10&#xff09;-CSDN博客 如果有…

RT2-使用NLP的方式去训练机器人控制器

目标 研究在网络数据上训练的视觉语言模型也可以直接结合到端到端的机器人控制中&#xff0c;提升泛化性以及获得突出的语义推理&#xff1b;使得单个的端到端训练模型可以同时学习从机器人观测到动作的映射&#xff0c;这个过程可以受益于基于网络上的语言和视觉语言数据的预训…

提高LabVIEW软件的健壮性

提高LabVIEW软件的健壮性&#xff0c;即增强其在各种操作条件下的可靠性和稳定性&#xff0c;是开发过程中非常重要的一环。健壮的软件能够在面对意外输入、极端环境和系统故障时依然表现出色&#xff0c;确保系统的连续性和可靠性。以下是详细的方法和策略&#xff0c;从多个角…

如何在 CentOS 上配置本地 YUM 源

引言 CentOS 作为一个流行的企业级 Linux 发行版&#xff0c;依赖 YUM&#xff08;Yellowdog Updater, Modified&#xff09;来管理软件包。YUM 源&#xff08;Repository&#xff09;是软件包存储和分发的中心&#xff0c;它们通常位于互联网上。然而&#xff0c;在某些情况下…

Linux驱动开发-03字符设备驱动框架搭建

一、字符设备驱动开发步骤 驱动模块的加载和卸载&#xff08;将驱动编译模块&#xff0c;insmod加载驱动运行&#xff09;字符设备注册与注销&#xff08;我们的驱动实际上是去操作底层的硬件&#xff0c;所以需要向系统注册一个设备&#xff0c;告诉Linux系统&#xff0c;我有…

快速入门,springboot知识点汇总

学习 springboot 应该像学习一门编程语言一样&#xff0c;首先要熟练掌握常用的知识&#xff0c;而对于不常用的内容可以简单了解一下。先对整个框架和语言有一个大致的轮廓&#xff0c;然后再逐步补充细节。 前序: Spring Boot 通过简化配置和提供开箱即用的特性&#xff0c…

第三期书生大模型实战营 第1关 Linux 基础知识

第三期书生大模型实战营 第1关 Linux 基础知识 第三期书生大模型实战营 第1关 Linux 基础知识InternStudio开发机创建SSH密钥配置通过本地客户端连接远程服务器通过本地VSCode连接远程服务器运行一个Python程序总结 第三期书生大模型实战营 第1关 Linux 基础知识 Hello大家好&a…

cesium 雷达扫描

cesium 雷达扫描 (下面附有源码) 实现思路 1、通过改变圆型材质来实现效果, 2、用了模运算和步进函数(step)来创建一个重复的圆形图案 3、当纹理坐标st落在垂直或水平的中心线上时,该代码将改变透明度和颜色,以突出显示这些线 示例代码 <!DOCTYPE html> <ht…