部署前端项目

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

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.mfbz.cn/a/788410.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

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

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

leetcode--验证二叉搜索树

leetcode地址:验证二叉搜索树 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必…

基于与STM32的加湿器之雾化片驱动

基于与STM32的加湿器之雾化片驱动 加湿器是一种由电力驱动,用于增加环境湿度的家用电器。加湿器通过特定的方式(如蒸发、超声波振动或加热)将水转化为水蒸气,并将这些水蒸气释放到空气中,从而增加空气中的湿度。主要功…

java通过poi-tl导出word实战详细步骤

文章目录 与其他模版引擎对比1.引入maven依赖包2.新建Word文档exportWprd.docx模版3.编写导出word接口代码4.导出成果 poi-tl是一个基于Apache POI的Word模板引擎,也是一个免费开源的Java类库,你可以非常方便的加入到你的项目中,并且拥有着让…

自动化数据集成的BI工具,为你提供决策洞察力

传统的商业智能(BI)报表系统采用的是“业务提报表需求,IT进行开发”的模式。决策管理者和业务人员提出用报表等来展示经营管理数据的需求;接着IT响应需求,进行需求沟通、数据处理加工、报表开发等主体工作;…

企业化运维(7)_Zabbix企业级监控平台

官网:Zabbix :: The Enterprise-Class Open Source Network Monitoring Solution ###1.Zabbix部署### (1)zabbix安装 安装源 修改安装路径为清华镜像 [rootserver1 zabbix]# cd /etc/yum.repos.d/ [rootserver1 yum.repos.d]# vim zabbix.r…

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.…

计算机网络——网络层(概念及IP地址划分)

目录 网络层概念 网络层向上层提供的两种服务 虚电路 网络提供数据报服务 虚电路服务与数据报服务的对比 网络层的两个层面 分组传送到路由器的运作 对网络层进行分层 网际协议IP 虚拟互联网络 IP地址 IP地址及其表示方法 IP地址的计算方式 IP地址的结构 …

【目标跟踪】CoTracker 环境配置

配置 CoTracker 环境 首先下载 conda&#xff0c;然后安装虚拟环境。 1.创建环境&#xff1a;如果环境不存在&#xff0c;你需要创建一个新的 conda 环境。可以使用以下命令创建名为 cotracker 的环境&#xff1a; conda create -n cotracker python3.x 其中 3.x 是你想要安…

欧姆龙安全PLC及周边产品要点指南

电气安全、自动化设备作业安全&#xff0c;向来是非常非常之重要的&#xff01;越来越多的客户在规划新产线、改造既有产线的过程中&#xff0c;明确要求设计方和施工方将安全考虑进整体方案中进行考虑和报价&#xff01;作为一名自动化电气工程师&#xff0c;尤其是高级工程师…

大话光学原理:4.散射:瑞利、拉曼、米氏和布里渊

这是一缕柔和的光&#xff0c;在空气的舞台上轻盈地跳跃。它悠然自得&#xff0c;在宁静的空间中缓缓前行。然而&#xff0c;一片细薄透明的介质挡住了它的脚步&#xff0c;它毫无预兆地撞上了这片障碍。在这短暂的接触中&#xff0c;它被分解成无数微小的粒子&#xff0c;被迫…

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

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

【重大消息】报告称OpenAI的产品可经由微软的服务提供给中国客户

尽管OpenAI正在采取措施限制中国用户访问其平台&#xff0c;但一份最新报告称&#xff0c;中国用户仍可通过微软的Azure云计算平台访问该公司的产品。微软和OpenAI有着密切的合作关系&#xff0c;前者通过人工智能功能获得了独家产品访问权以拓展企业计算。最新的报道来自《The…

拓展神经网络八股(入门级)

自制数据集 minst等数据集是别人打包好的&#xff0c;如果是本领域的数据集。自制数据集。 替换 把图片路径和标签文件输入到函数里&#xff0c;并返回输入特征和标签 只需要把图片灰度值数据拼接到特征列表&#xff0c;标签添加到标签列表,提取操作函数如下&#xff1a; def…

25.无源蜂鸣器驱动设计

相对于有源蜂鸣器&#xff0c;无源蜂鸣器的成本更低&#xff0c;声音频率可控。而有源蜂鸣器因其内部 自带振荡源&#xff0c;只要加上适当的直流电源即可发声&#xff0c;程序控制较为方便。 &#xff08;1&#xff09;设计定义&#xff1a;设计一个无源蜂鸣器的驱动程序&…

基于泰坦尼克号生还数据进行 Spark 分析

基于泰坦尼克号生还数据进行 Spark 分析 在这篇博客中&#xff0c;我们将展示如何使用 Apache Spark 分析著名的泰坦尼克号数据集。通过这篇教程&#xff0c;您将学习如何处理数据、分析乘客的生还情况&#xff0c;并生成有价值的统计信息。 数据解析 • PassengerId &#…

ctfshow-web入门-文件上传(web164、web165)图片二次渲染绕过

web164 和 web165 的利用点都是二次渲染&#xff0c;一个是 png&#xff0c;一个是 jpg 目录 1、web164 2、web165 二次渲染&#xff1a; 网站服务器会对上传的图片进行二次处理&#xff0c;对文件内容进行替换更新&#xff0c;根据原有图片生成一个新的图片&#xff0c;这样…

EasyCVR视频汇聚平台:存储系统怎么选?分布式存储vs.集中式存储的区别在哪?

在当今的数字化时代&#xff0c;安防监控已成为维护社会秩序和公共安全的重要手段。随着监控设备的普及和监控数据的不断增加&#xff0c;如何高效、安全地存储和管理这些视频数据&#xff0c;成为了安防行业面临的重要挑战。EasyCVR视频存储系统凭借其卓越的性能和灵活的架构&…

综合安全防护

题目 1,DMZ区内的服务器,办公区仅能在办公时间内(9:00-18:00)可以访问,生产区的设备全天可以访问. 2,生产区不允许访问互联网,办公区和游客区允许访问互联网 3,办公区设备10.0.2.10不允许访问DMz区的FTP服务器和HTTP服务器,仅能ping通10.0.3.10 4,办公区分为市场部和研发部,研…

pnpm workspace使用教程【Monorepo项目】

目录 前言一、pnpm简介特点&#xff1a;对比 二、 创建项目添加文件 pnpm-workspace.yaml目录结构pnpm workspace: 协议修改配置文件执行 安装 三、命令解析执行包命令所有包操作命令 四、实例代码 前言 前面两篇&#xff0c;我们讲了 yarn workspace 和 lerna &#xff0c; …