以前端視角,漫談「雲端」

来源:https://www.cnblogs.com/jingdongkeji/archive/2023/03/31/17275423.html
-Advertisement-
Play Games

當今世界,雲計算技術在快速發展,不斷為我們帶來新的應用場景和解決方案。作為一名前端開發者,瞭解雲技術並掌握如何在前端中應用它們是必不可少的。本篇文章將介紹雲計算技術的基本概念,並從前端角度探討如何使用雲技術提高應用的可擴展性、安全性、性能和用戶體驗。 ...


作者:京東零售 鄭炳懿

前言:

當今世界,雲計算技術在快速發展,不斷為我們帶來新的應用場景和解決方案。作為一名前端開發者,瞭解雲技術並掌握如何在前端中應用它們是必不可少的。本篇文章將介紹雲計算技術的基本概念,並從前端角度探討如何使用雲技術提高應用的可擴展性、安全性、性能和用戶體驗。

一、雲技術

1.1 什麼是雲技術

在開始之前,我們需要先瞭解一下什麼是雲計算。雲計算是一種基於互聯網的計算方式,它將計算資源、存儲和網路功能提供給用戶,使得用戶能夠在雲端快速構建和部署應用程式。雲計算有三種主要的服務模式:Infrastructure as a Service(IaaS,基礎設施即服務)、Platform as a Service(PaaS,平臺即服務)和Software as a Service(SaaS,軟體即服務)。

其中,IaaS模式提供基礎設施的租用,包括計算資源、存儲空間、網路連接等。PaaS模式則提供更高級別的服務,用戶只需要關註應用程式的開發,不需要擔心底層基礎設施的維護。而SaaS模式則直接提供應用程式,無需用戶自行搭建。

1.2 雲技術的發展階段

  1. 虛擬化時代(2003-2006):以VMware為首的虛擬化技術逐漸成熟,使得伺服器的利用率得到提高,IT管理員的工作也得到簡化。

  2. 彈性計算時代(2006-2008):Amazon推出了首個基於雲的彈性計算服務EC2,這種按需使用的計算資源概念,迅速得到了廣泛的認知和應用。

  3. 平臺時代(2008-2010):Google、Salesforce、Microsoft等大廠開始推出基於雲的平臺服務,支持用戶快速創建和部署應用程式。

  4. 基礎設施時代(2010-2014):IBM、HP、Amazon等大廠建立了自己的公共雲平臺,使雲服務的利用率更高,用戶可以選擇適合自己的服務、資源和應用。

  5. 混合雲時代(2014-今):隨著企業對數據安全和靈活性的更加重視,混合雲成為新的發展趨勢,既有公有雲資源的外部環境,也有私有雲資源的內部環境,或者通過多雲、跨雲的方式進行部署。

二、雲技術在前端中的應用

前端在雲計算中扮演著非常重要的角色。前端工程師可以使用各種雲計算平臺和工具來開發和部署應用程式。以下是一些前端在雲計算中的具體作用:

前端負責構建和維護用戶界面,以便用戶可以與雲應用程式進行交互。 前端開發人員可以利用雲計算平臺提供的工具和服務,如雲存儲、API管理等,來加快應用程式的開發速度。 前端可以使用雲計算平臺提供的自動化工具和流程,如自動化構建、測試和部署,來提高應用程式的質量和穩定性。 前端可以利用雲計算平臺提供的大數據分析和機器學習工具,來構建更智能的應用程式。

以下從四個方面來闡述雲技術在前端中的應用:

2.1 前端框架和庫的部署和管理

前端應用程式通常使用許多框架和庫來完成各種任務,如UI開發、路由、狀態管理、數據可視化等。使用雲技術,前端開發人員可以將這些框架和庫部署到雲端,並使用雲服務來管理這些資源。例如,使用AWS S3存儲和分發前端靜態內容,使用AWS Lambda處理前端應用程式中的函數,使用AWS CloudFormation自動化前端部署等。

2.2 前端雲存儲

前端應用程式需要保存用戶的數據和文件,使用雲存儲技術可以將這些數據和文件保存到雲端,提高可靠性和可擴展性。例如,使用AWS S3存儲用戶上傳的文件和圖像,使用AWS DynamoDB存儲前端應用程式中的用戶數據等。

下麵以 Amazon S3 為例,介紹如何在前端應用程式中使用雲存儲服務。

Amazon S3 是一個可擴展的雲存儲服務,可以存儲和檢索任意數量的數據,從任意位置進行訪問。它可以在不同的地理位置進行存儲,並且可以根據需要自動擴展。

要在前端應用程式中使用 Amazon S3,我們可以使用 AWS SDK for JavaScript,它是一個 JavaScript 庫,提供了與 Amazon Web Services 的 API 交互的功能。我們可以使用它來上傳、下載和管理存儲桶中的對象。

以下是一個簡單的示例,展示瞭如何使用 AWS SDK for JavaScript 上傳一個文件到 Amazon S3:

const AWS = require('aws-sdk');
const fs = require('fs');

// 配置 Amazon S3 客戶端
const s3 = new AWS.S3({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
  region: 'YOUR_REGION'
});

// 讀取要上傳的文件
const fileContent = fs.readFileSync('path/to/file');

// 設置上傳參數
const params = {
  Bucket: 'YOUR_BUCKET_NAME',
  Key: 'path/to/remote/file',
  Body: fileContent
};

// 上傳文件到 Amazon S3
s3.upload(params, function(err, data) {
  if (err) {
    console.log("Error uploading file:", err);
  } else {
    console.log("File uploaded successfully. Location:", data.Location);
  }
});

通過使用 AWS SDK for JavaScript,我們可以輕鬆地將文件上傳到 Amazon S3,並獲取上傳後的文件位置。這樣我們就可以在前端應用程式中使用這些文件了。

2.3 跨域資源共用(CORS)

在雲計算中,應用程式和資源通常被部署到不同的伺服器和功能變數名稱上。因此,前端應用程式需要使用CORS技術來允許跨域訪問。使用雲服務可以更容易地配置和管理CORS策略。例如,使用AWS API Gateway配置前端應用程式的API訪問控制,使用AWS S3配置前端靜態內容的CORS策略等。

2.4 前端雲計算

前端應用程式需要處理各種任務,如數據轉換、圖像處理、音頻轉換等。使用雲計算技術,可以將這些任務放到雲端處理,減少前端應用程式的負擔。例如,使用AWS Lambda運行前端應用程式中的函數,使用AWS Batch處理前端應用程式中的批處理任務等。

三、雲技術與前端技術的結合

雲計算平臺是指使用雲計算技術搭建的基礎設施、服務和應用程式,它可以提供許多基礎性服務,如計算、存儲和網路。而前端技術則是指構建互聯網應用所需的前端技術,包括 HTML、CSS 和 JavaScript 等。

雲計算平臺與前端技術的結合可以大大改善開發流程和用戶體驗。通過雲計算平臺,我們可以減少本地機器的壓力,提高開發效率;通過前端技術,我們可以打造出更加美觀、易用的界面。

3.1 結合示例

使用雲計算平臺(如亞馬遜 Web 服務)部署一個簡單的 Node.js 後端程式,提供兩個 API:一個獲取當前時間,一個獲取隨機數。Node代碼如下:

const express = require('express');
const app = express();

app.get('/time', (req, res) => {
  res.json({ time: new Date() });
});

app.get('/random', (req, res) => {
  res.json({ random: Math.random() });
});

app.listen(8080, () => {
  console.log('Server started on port 8080');
});

接下來使用 React 前端技術構建一個簡單的 SPA(單頁應用),展示兩個 API 返回的數據。前端代碼如下:

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [time, setTime] = useState(null);
  const [random, setRandom] = useState(null);

  useEffect(() => {
    fetch('/time')
      .then(res => res.json())
      .then(data => setTime(data.time));

    fetch('/random')
      .then(res => res.json())
      .then(data => setRandom(data.random));
  }, []);

  return (
    <div>
      <p>The current time is: {time ? time.toString() : "loading..."}</p>
      <p>A random number is: {random ? random.toString() : "loading..."}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

這個示例使用 React Hooks 和 useEffect 之類的功能,將後端 API 調用作為組件的副作用,一旦得到數據,就會觸發重新渲染。用戶可以看到時間和隨機數的值,併在頁面中顯示出來。

通過這個簡單的示例,我們可以看出雲計算平臺與前端技術結合的巨大潛力。僅僅通過幾行代碼,我們就能夠創建一個功能強大的應用程式,能夠在多個設備和平臺上使用,並可以隨時進行升級和擴展。

3.2 結合實踐

使用雲存儲服務(如 Amazon S3 或 Google Cloud Storage)存儲和分發前端應用程式的靜態資源。這些服務可以讓我們輕鬆地上傳、下載和管理文件,同時還提供全球性的內容分髮網絡(CDN)功能,能夠加速頁面載入速度。

<script src="https://cdn.example.com/app.js"></script>

使用雲伺服器(如 Amazon EC2 或 Microsoft Azure Virtual Machines)托管前端應用程式的動態內容,或者使用雲函數(如 Amazon Lambda 或 Google Cloud Functions)實現後端服務的邏輯。這些服務可以讓我們靈活地配置和管理伺服器資源,同時還提供高可用性、彈性伸縮等功能。

fetch('/api/data') 
    .then(res => res.json()) 
    .then(data => console.log(data));

使用雲資料庫(如 Amazon DynamoDB 或 Google Cloud Datastore)存儲和查詢應用程式的數據。這些服務可以讓我們存儲和檢索海量數據,並提供高可用性、彈性伸縮等功能。

const AWS = require('aws-sdk');
const ddb = new AWS.DynamoDB.DocumentClient();

function getData() {
  const params = {
    TableName: 'my-table',
    Key: { id: '123' }
  };
  return ddb.get(params).promise();
}

雲計算平臺與前端技術結合的實踐可以讓我們更加高效地開發和運營應用程式,這對於企業和個人都是非常有價值的。同時,也需要註意雲計算平臺和前端技術的安全性和穩定性,避免出現數據泄露、服務宕機等問題。

四、雲技術的安全性和穩定性

雲技術的安全性和穩定性是非常重要的,因為這關係到應用程式的可靠性和用戶體驗。關於安全性,一方面我們需要確保前端應用程式在運行時不會泄露敏感信息或受到攻擊;另一方面我們也需要保護用戶的數據不會被非法獲取或篡改。

4.1 前端安全問題和雲技術的解決方案

  1. XSS(跨站腳本攻擊):攻擊者通過註入惡意代碼來獲取用戶信息或執行其他惡意操作。雲技術可以使用 Web 應用防火牆(WAF)或其他安全措施來防範這種攻擊。

  2. CSRF(跨站請求偽造):攻擊者通過利用用戶已登錄的狀態來執行惡意請求(例如發起轉賬、刪除數據等)。雲技術可以使用 Token 或其他防範措施來解決這種攻擊。

  3. 數據泄露:在傳輸和存儲數據時,需要使用 SSL/TLS 等協議來保護數據不被竊取。此外,還需要對數據進行加密、備份和審計等安全措施。

4.2 雲技術提供穩定性和可靠性功能保護

  1. 高可用性:雲技術可以使用負載均衡、多機房部署等技術來提高應用程式的可用性。

  2. 彈性伸縮:雲技術可以根據應用程式的負載情況來自動調整伺服器的資源配置,以提高應用程式的性能和可靠性。

  3. 監控和告警:雲技術可以提供實時監控和告警功能,幫助我們及時發現和解決故障和異常情況。

  4. 災備和恢復:雲技術可以使用冷備、熱備或異地備份等技術來保障業務數據的安全和可靠性。

雲技術的安全性和穩定性對於前端應用程式的成功運行來說十分重要。通過使用雲平臺提供的安全和穩定功能,我們可以更好地保護用戶數據和應用程式的可靠性,從而提升用戶體驗和企業價值。

五、雲技術未來最具潛力的發展方向

雲計算是一個非常龐雜而快速發展的技術領域,其中包含了各種技術體系和範式,涵蓋了整個軟體工程的方方面面。前端作為應用的展示層,需要緊密地與雲應用及雲平臺打交道,實現雲計算領域的相關技術及運維要求。

從前端視角出發,我覺得以下幾個方向可能是未來最具潛力的發展方向:

5.1 雲原生框架

隨著雲計算迅速發展,雲原生框架越來越受到關註。這種框架是一種開發和部署應用程式的方法,它基於微服務架構,強調應用程式的可移植性、可擴展性、可靠性和自動化。 雲原生框架包含了很多應用程式的運行時環境、服務發現、負載均衡、容錯、監控、日誌和安全等方面的支持,使得開發和運維人員可以更加便捷的管理和維護應用程式。同時,使用雲原生框架可以使得應用程式更容易在不同的雲環境中運行和跨雲平臺進行部署。

5.2 容器化技術

容器化技術是一種軟體打包和分發的方式,其本質是將應用程式和所有依賴的庫和配置打包成一個輕量級的容器,使得應用程式可以運行在不同的操作系統和雲環境中,並且保證運行環境的一致性和可靠性。 容器化技術具有很多優勢,比如便於進行持續交付和部署、應用程式更容易遷移和擴展、實現應用程式的隔離和安全性等。因此,容器化技術已經成為雲計算領域中的一個核心技術,也是大量雲原生框架和平臺的基礎。

5.3 Serverless架構

Serverless架構通過無需維護伺服器、按量付費等特性,使得開發者可以專註於寫代碼,而無需考慮底層的基礎設施。藉助Serverless技術,開發者可以開發出更為輕量化的應用程式,同時,Serverless也提供了一個高效的方式處理需要大量計算的應用場景,如圖像識別等。

5.4 GraphQL技術

GraphQL是一種用於API開發的技術,它使得開發者可以基於類型定義來定義數據結構,並定義一些靜態問題和重覆問題。並且GraphQL旨在通過介面降低前端和後端的耦合,大大提升前端谷的開發效率。

5.5 WebAssembly技術

WebAssembly是一種可以在所有現代網路瀏覽器中運行的二進位代碼格式,它可以讓開發者使用其他語言(如C++,Rust等)來開發Web應用程式,同時其性能更加優越,這將使得Web應用程式更加接近原生應用的性能。

總之,隨著雲技術的不斷發展和前端技術的創新,可以預見到,前端技術將與雲技術越來越融合,共同推動數字化轉型和業務創新的深入,同時也會帶來更多機會和挑戰。

最後:

作為一名前端開發工程師,整篇文章可能只從前端的視角去分析和理解,觀點可能有些淺薄了,在這裡僅作為一點個人的看法和分享,如果對您有所幫助,那便是我所期望看到的,如果您有更好的想法,歡迎咚咚交流學習。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Discovery第18期直播已於3月30日圓滿結束,本期直播邀請天眼查做客直播間,從天眼查與華為Push用戶增長服務合作歷程切入,聚焦用戶增長,分享提升應用活躍度和渠道ROI的經驗與見解。一起來回顧本期精彩內容吧! 【精彩對話】 Q1: 天眼查為什麼選擇華為Push用戶增長服務實現拉新、促活和轉化 ...
  • background中的cover與contain的區別 contain:將圖片縮放至寬度或者高度能夠完全適應容器,並且保持圖片寬高比不變。如果容器寬高比與圖片寬高比不同,則容器會留白,不會出現圖片的裁剪。例如,對於一個寬度為200px、高度為200px的容器,背景圖片使用background-si ...
  • 好家伙, 現在,我想要把我的飛機大戰塞到我的主頁里去,想辦法把文件導入 然後,直接死在第一步,圖片渲染都成問題 先用vue寫一個測試文件 來測試canvas的繪製 <template> <div> <div ref="stage"></div> <button @click="drawsth()"> ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 代碼的簡潔、美感、可讀性等等也許不影響程式的執行,但是卻對人(開發者)的影響非常之大,甚至可以說是影響開發者幸福感的重要因素之一; 瞭解一些有美感的代碼,不僅可以在一定程度上提高程式員們的開發效率,有些還能提高代碼的性能,可謂是一舉 ...
  • react三大屬性 一.狀態 類組件1. state 是組件的屬性,值是對象。state中的數據是可讀可寫的,通過更新state來更新對應的頁面顯示(重新渲染組件),通過setState來更新state數據且更新是一種合併 ,在類組件中使用.組件自定義的方法中this為undefined(1)強制綁 ...
  • 創建 Vue3 項目的步驟如下: 安裝 Node.js Vue3 需要依賴 Node.js 環境,因此需要先安裝 Node.js。可以從官網下載 Node.js 的安裝包並安裝,也可以使用包管理器安裝,例如在 Ubuntu 上可以使用以下命令安裝: sudo apt-get update sudo ...
  • 拖放排序列表是一種廣泛使用的 UI 元素,允許用戶通過將項目拖放到所需位置來重新排序。這個功能可以在許多網路應用程式中找到,比如任務管理器和電子商務網站。 在這篇博文中,您將學習如何使用 HTML、CSS 和 JavaScript 創建拖放可排序列表。不使用任何外部 JavaScript 庫來創建這 ...
  • 之前,整個《現代圖片性能優化及體驗優化指南》分了 5 篇來發,本文是系列合集,方便大家收藏及連貫閱讀。 圖片資源,在我們的業務中可謂是占據了非常大頭的一環,尤其是其對帶寬的消耗是十分巨大的。 對圖片的性能優化及體驗優化在今天就顯得尤為重要。本文,就將從各個方面闡述,在各種新特性滿頭飛的今天,我們可以 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...