上手华为软开云DevOps前后端分离实践之-静态资源服务器(Node.js)

简介: 上手华为软开云DevOps前后端分离实践之-静态资源服务器(Node.js)

TKFWK8[J]QN2)8}L@(`$S3W.png

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情


简介


  • 前面分别实现了 SpringBoot、Vue 项目在华为软开云的一键操作。但是 Vue 打包后的部署,需要一个静态资源服务器来 Serve,如果跨域未在服务器端处理,那么在这一静态服务器中同时还要处理 Vue 在生产环境下的跨域。

  • 静态资源服务器的实现方式有很多,基本每种服务端语言都有对应的框架或容器,比如 Java 的 Tomcat、以及 Python、PHP、Node.js 等,另外还有较为专业的 HTTP 和反向代理 Web 服务器 Nginx,均可实现这一目标。

  • 这里选择 Node.js 实现的静态资源服务器,主要原因是其语法也是 JavaScript,与前端的 Vue 通用;另外在 Node 的生态下,已经有现成的库实现了跨域,关键是跟 Vue 在开发环境下跨域完全一样,平滑迁移,无缝切换。

效果


2R_Q307}GTHH]V`N35313G9.png

Note: 这篇文章的内容比较简单,就是基于 koa 实现了一个静态资源服务器,直接上核心代码,就不放到华为云了。部署时将该 Node.js 项目放到 Linux 的目录 A,然后前端 Vue 的 dist 静态资源文件夹直接放到目录 A 即可。


Node.js 代码index.js


const path = require("path");
const Koa = require("koa");
const static = require("koa-static");
const httpProxyMiddleware = require("http-proxy-middleware");
const koaConnect = require("koa2-connect");
const app = new Koa();
app.use(static(path.join(__dirname, "dist")));
const proxy = function(context, options) {
  if (typeof options === "string") {
    options = {
      target: options
    };
  }
  return async function(ctx, next) {
    await koaConnect(httpProxyMiddleware(context, options))(ctx, next);
  };
};
// proxy config:生产环境跨域
const proxyTable = {
  "/3rd": {
    target: "http://www.tuling123.com/openapi/api",
    changeOrigin: true,
    pathRewrite: {
      "^/3rd": ""
    }
  },
  "/api": {
    target: "http://114.116.31.223:8080",
    changeOrigin: true
    // pathRewrite: {
    //   '^/api': ''
    // }
  }
};
Object.keys(proxyTable).map(context => {
  const options = proxyTable[context];
  app.use(proxy(context, options));
});
const port = process.env.PORT || 8888;
app.listen(port, () => {
  console.log(`Koa app listening at ${port}...`);
});

Note: 开发环境跨域


7(`5_7F[G_R~JIW18TK}U9M.png

`Vue`在开发环境下的跨域配置与生产环境下的跨域配置写法完全一致,这是用`Node.js`来实现此静态资源服务器的优势。

Node.js 配置package.json

{
  "name": "front-server",
  "version": "1.0.0",
  "description": "frontend project deployed in node.js static web server",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/heartsuit/devcloud-static-server.git"
  },
  "keywords": ["node.js", "pm2", "static", "resource"],
  "author": "heartsuit",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/heartsuit/devcloud-static-server/issues"
  },
  "homepage": "https://github.com/heartsuit/devcloud-static-server#readme",
  "dependencies": {
    "http-proxy-middleware": "^0.19.1",
    "koa": "^2.7.0",
    "koa-static": "^5.0.0",
    "koa2-connect": "^1.0.2"
  }
}

下图是上一篇上手华为软开云 DevOps 前后端分离实践之-前端 Vue 中的一步,其中cd /opt/front-server即为该静态资源服务器所在目录,上篇文章中 Vue 的打包资源 dist.zip 也解压到该目录。


@EBT`({TENUTM5`1I3C%IKH.png


Note:执行Shell命令的第二步是安装依赖:首先配置全局 npm 包安装路径,接着全局安装nrm(注意软连接,这是 Linux 下全局安装 npm 包的一个坑),全局安装pm2;然后进入项目目录,安装依赖,最后由 pm2 守护启动。

PS:nrm 全局安装后,可切换 npm 包的镜像源地址;pm2 全局安装后,可切换 npm 包的镜像源地址;进入项目目录 指的是一个 node.js 后端服务项目,实现了静态资源服务器,以及 Vue 打包项目在生产环境下的跨域。

至此,我们分别实现了在华为软开云上基于SpringBoot的后端项目、基于Vue的前端项目的一键检查、编译、部署,以及基于Node.js的静态资源服务器(生产环境下 Vue 的跨域)。


Source Code: Github



If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

目录
相关文章
|
20天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
22天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
|
4天前
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。
|
2月前
|
人工智能 监控 测试技术
阿里云磐久服务器稳定性实践之路
阿里云服务器质量智能管理体系聚焦自研服务器硬件层面的极致优化,应对高并发交付、短稳定性周期、早问题发现和快修复四大挑战。通过“三个重构”(质量标准、开发流程、交付模式)、“六个归一”(架构、硬件、软件、测试、部件、制造)策略,实现芯片、整机和云同步发布,确保快速稳定上量。此外,全场景测试体系与智能预警、分析、修复系统协同工作,保障服务器在萌芽阶段发现问题并及时解决,提升整体质量水平。未来,阿里云将继续深化大数据驱动的质量管理,推动服务器行业硬件质量的持续进步。
|
2月前
|
存储 人工智能 运维
面向AI的服务器计算软硬件架构实践和创新
阿里云在新一代通用计算服务器设计中,针对处理器核心数迅速增长(2024年超100核)、超多核心带来的业务和硬件挑战、网络IO与CPU性能增速不匹配、服务器物理机型复杂等问题,推出了磐久F系列通用计算服务器。该系列服务器采用单路设计减少爆炸半径,优化散热支持600瓦TDP,并实现CIPU节点比例灵活配比及部件模块化可插拔设计,提升运维效率和客户响应速度。此外,还介绍了面向AI的服务器架构挑战与软硬件结合创新,包括内存墙问题、板级工程能力挑战以及AI Infra 2.0服务器的开放架构特点。最后,探讨了大模型高效推理中的显存优化和量化压缩技术,旨在降低部署成本并提高系统效率。
|
3月前
|
运维 监控 Devops
自动化运维实践:打造高效的DevOps流水线
在软件开发的快节奏中,自动化运维成为提升效率、确保质量的关键。本文将引导你理解自动化运维的价值,通过实际案例分享如何构建一个高效、可靠的DevOps流水线。我们将从持续集成(CI)开始,逐步深入到持续部署(CD),并展示代码示例来具体说明。准备好让你的运维工作飞跃式进步了吗?让我们开始吧!
|
3月前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
70 8
|
4月前
|
运维 安全 Devops
DevOps实践中的安全审核和合规性
在DevOps实践中,确保安全审核和合规性至关重要。通过自动化合规审查、持续安全集成、基础设施即代码管理、敏捷合规框架、跨部门合作、教育与培训、实施DevSecOps模型、使用安全编码技术、整合正确工具及采用安全即代码等措施,组织能有效管理并降低合规与安全风险,促进高效可靠的DevOps文化发展。
|
4月前
|
监控 安全 Devops
DevOps实践中,如何平衡开发速度和安全审核的效率
在DevOps实践中,为平衡开发速度与安全审核效率,可采取自动化安全测试、安全编码实践、持续监控与日志分析、集成安全工具、合规性代码审查、基础设施即代码、权限和访问控制、安全培训、漏洞及补丁管理和持续反馈改进等措施,确保高效安全的开发流程。
|
4月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器