輕鬆搭建小型網站,騰訊雲輕量應用伺服器全解析

申公豹發表於2024-11-18

在雙十一這個購物狂歡節,騰訊雲輕量應用伺服器為開發者帶來了前所未有的優惠!無論你是剛剛入門的小白,還是經驗豐富的開發者,騰訊雲輕量應用伺服器都能為你提供強大且高效的技術支援。簡化的操作介面、靈活的配置選項、超高價效比,讓你無需複雜的設定,就能輕鬆部署網站和應用,迅速搭建屬於自己的雲端環境。現在正是入手的最佳時機,趕緊抓住雙十一的優惠,讓你的專案更快上線,享受雲端計算帶來的無限可能!

雙十一活動入口

https://cloud.tencent.com/act/pro/double11-2024?fromSource=gw...

image.png

騰訊雲輕量應用伺服器(Lighthouse)提供了快速、簡便的方式來部署小型網站。本文將帶你一步步完成從購買伺服器到部署一個簡單的動態網站的過程。

image.png

image.png

1. 環境準備

在開始之前,請確保你已經註冊了騰訊雲賬號,並熟悉基礎的Linux命令操作。

1.1 購買騰訊雲輕量應用伺服器

  1. 登入騰訊雲官網
  2. 選擇“輕量應用伺服器”,根據需要選擇地域、映象(建議選擇 CentOS 或 Ubuntu 系統映象)和規格。
  3. 購買並啟動伺服器,記下IP地址和SSH埠。

1.2 配置伺服器環境

使用SSH連線伺服器:

ssh root@<伺服器IP地址> -p <SSH埠>  

更新系統:

sudo apt update && sudo apt upgrade -y  # Ubuntu
# 或
sudo yum update -y  # CentOS

安裝常用工具:

sudo apt install git curl -y  # Ubuntu  
# 或  
sudo yum install git curl -y  # CentOS  

2. 開發網站並部署

本文以 Node.js 搭建的簡單網站為例,講解如何在伺服器上開發和部署。

2.1 安裝 Node.js 和 Nginx

安裝 Node.js

使用 nvm(Node Version Manager)安裝 Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash  
source ~/.bashrc  
nvm install --lts  
node -v  # 檢查Node.js版本  

安裝 Nginx

sudo apt install nginx -y  # Ubuntu  
# 或  
sudo yum install nginx -y  # CentOS  

啟動 Nginx 並設定為開機啟動:

sudo systemctl start nginx  
sudo systemctl enable nginx  

image.png

2.2 建立網站程式碼

在伺服器上建立一個簡單的 Node.js 網站。

初始化專案

mkdir my-website  
cd my-website  
npm init -y  

安裝必要的依賴

npm install express  

建立 app.js

編輯 app.js 檔案:

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

app.get('/', (req, res) => {  
    res.send('Hello, Tencent Cloud Lighthouse!');  
});  

const PORT = 3000;  
app.listen(PORT, () => {  
    console.log(`Server is running on http://localhost:${PORT}`);  
});  

啟動服務

執行以下命令啟動網站:

node app.js  

開啟瀏覽器,訪問 http://<伺服器IP>:3000,即可看到頁面顯示 Hello, Tencent Cloud Lighthouse!

image.png

2.3 配置反向代理

為了讓網站透過80埠訪問,我們需要配置 Nginx 作為反向代理。

編輯 Nginx 配置檔案

開啟 /etc/nginx/sites-available/default(Ubuntu)或 /etc/nginx/nginx.conf(CentOS),新增如下配置:

server {  
    listen 80;  
    server_name <伺服器IP>;  

    location / {  
        proxy_pass http://127.0.0.1:3000;  
        proxy_http_version 1.1;  
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host;  
        proxy_cache_bypass $http_upgrade;  
    }  
}  

測試並重啟 Nginx

sudo nginx -t  # 測試配置是否正確  
sudo systemctl restart nginx  # 重啟Nginx  

現在訪問 http://<伺服器IP> 即可直接訪問網站。

3. 網站功能擴充套件

3.1 新增動態頁面

app.js 中新增新的路由:

app.get('/about', (req, res) => {  
    res.send('This is the about page!');  
});  

重新啟動網站:

node app.js  

訪問 http://<伺服器IP>/about 檢視新頁面內容。

3.2 使用 PM2 管理程序

PM2 是一個優秀的 Node.js 程序管理工具,可以讓網站在後臺執行,並實現自動重啟。
安裝 PM2:

npm install -g pm2  

使用 PM2 啟動網站:

pm2 start app.js  

設定 PM2 開機自啟動:

pm2 startup  
pm2 save  

image.png

4. 安全性與效能最佳化

4.1 配置防火牆

使用騰訊雲控制檯配置安全組,確保僅開放必要埠(如80和443)。

4.2 新增 HTTPS

申請免費的 SSL 證書(如 Let’s Encrypt),並將其應用到 Nginx 配置中:

sudo apt install certbot python3-certbot-nginx -y  
sudo certbot --nginx  

4.3 效能最佳化

  • 啟用 Nginx 快取功能。
  • 使用 CDN 加速靜態資源訪問。

5. 資料庫整合

網站開發中,動態資料的管理至關重要。接下來,我們將為網站新增一個資料庫,以便儲存和管理資料。

image.png

5.1 安裝 MySQL

在伺服器上安裝 MySQL 資料庫:

sudo apt install mysql-server -y  # Ubuntu  
# 或  
sudo yum install mysql-server -y  # CentOS  

啟動並設定 MySQL 開機自啟:

sudo systemctl start mysql  
sudo systemctl enable mysql  

配置 MySQL 安全性:

sudo mysql_secure_installation  

按照提示設定密碼並配置安全選項。

5.2 建立資料庫與表

登入 MySQL:

sudo mysql -u root -p  

建立一個名為 my_website 的資料庫,並建立一個 users 表:

CREATE DATABASE my_website;  
USE my_website;  

CREATE TABLE users (  
    id INT AUTO_INCREMENT PRIMARY KEY,  
    name VARCHAR(100) NOT NULL,  
    email VARCHAR(100) NOT NULL UNIQUE  
);  

插入測試資料:

INSERT INTO users (name, email) VALUES ('Alice', 'alice@example.com');  
INSERT INTO users (name, email) VALUES ('Bob', 'bob@example.com');  

退出 MySQL:

EXIT;  

5.3 整合 MySQL 到網站

在 Node.js 專案中安裝 MySQL 模組:

npm install mysql  

編輯 app.js,新增資料庫連線:

const mysql = require('mysql');  

const db = mysql.createConnection({  
    host: 'localhost',  
    user: 'root',  
    password: '<你的MySQL密碼>',  
    database: 'my_website'  
});  

db.connect((err) => {  
    if (err) {  
        console.error('Database connection failed:', err.stack);  
        return;  
    }  
    console.log('Connected to MySQL database');  
});  

新增一個新路由,查詢使用者資料並返回:

app.get('/users', (req, res) => {  
    db.query('SELECT * FROM users', (err, results) => {  
        if (err) throw err;  
        res.json(results);  
    });  
});  

重新啟動伺服器,訪問 http://<伺服器IP>/users,你會看到返回的使用者資料。

6. 檔案上傳功能

檔案上傳是動態網站的重要功能。下面我們將為網站新增檔案上傳的支援。

6.1 安裝 Multer

安裝檔案上傳中介軟體 Multer:

npm install multer  

6.2 配置檔案上傳

編輯 app.js,新增檔案上傳功能:

const multer = require('multer');  

const storage = multer.diskStorage({  
    destination: (req, file, cb) => {  
        cb(null, 'uploads/');  
    },  
    filename: (req, file, cb) => {  
        cb(null, `${Date.now()}-${file.originalname}`);  
    }  
});  

const upload = multer({ storage: storage });  

app.post('/upload', upload.single('file'), (req, res) => {  
    res.send(`File uploaded: ${req.file.path}`);  
});  

建立 uploads 目錄,並設定許可權:

mkdir uploads  
chmod 755 uploads  

測試檔案上傳功能:

  1. 使用 Postman 或其他工具傳送 POST 請求到 http://<伺服器IP>/upload
  2. 在請求中上傳一個檔案。
  3. 檢查伺服器上的 uploads 目錄,確認檔案已成功儲存。

image.png

7. 日誌與監控

為了更好地管理網站,新增日誌記錄和監控功能是必要的。

7.1 使用 Winston 記錄日誌

安裝 Winston 日誌庫:

npm install winston  

編輯 app.js,配置日誌記錄:

const winston = require('winston');  

const logger = winston.createLogger({  
    level: 'info',  
    format: winston.format.json(),  
    transports: [  
        new winston.transports.File({ filename: 'error.log', level: 'error' }),  
        new winston.transports.File({ filename: 'combined.log' })  
    ]  
});  

app.use((req, res, next) => {  
    logger.info(`${req.method} ${req.url}`);  
    next();  
});  

7.2 整合監控工具

可以使用 PM2 的監控功能:

pm2 monit  

此外,可以結合第三方服務(如 Grafana 或 Prometheus)進行更深入的監控和分析。

8. 自動化部署

為了方便後續更新程式碼,可以透過 Git 和 Webhook 實現自動化部署。

8.1 配置 Git

在伺服器上安裝 Git(如果尚未安裝):

sudo apt install git -y  # Ubuntu  
# 或  
sudo yum install git -y  # CentOS  

克隆專案到伺服器:

git clone <你的程式碼倉庫連結>  

image.png

8.2 配置 Webhook 自動部署

在伺服器上安裝 Webhook 工具(如 webhookd),並配置觸發指令碼來自動拉取更新和重啟服務。

image.png

9. 擴充套件方向

9.1 新增前端框架

可以使用 React、Vue.js 或 Angular 構建更復雜的前端介面,並透過 API 與後端通訊。

9.2 部署生產環境

將 Nginx 配置為靜態檔案託管伺服器,並開啟 gzip 壓縮和快取。結合 Docker 容器化部署,提高服務的可靠性和可擴充套件性。

9.3 高可用架構

  • 使用負載均衡器分發流量。
  • 資料庫讀寫分離。
  • 新增 Redis 快取以加速請求響應。

總結

透過本文,我們全面演示瞭如何使用騰訊雲輕量應用伺服器從零開始搭建一個小型網站的完整流程。以下是關鍵步驟的總結:

  1. 伺服器環境配置:包括購買騰訊雲輕量應用伺服器、安裝 Node.js 和配置基本開發環境。
  2. 專案初始化:建立一個基礎的 Node.js 應用,並透過 Express 框架快速構建 Web 伺服器。
  3. 靜態與動態頁面開發:透過 Express 提供靜態資源服務,並設計動態路由實現互動功能。
  4. 資料庫整合:使用 MySQL 資料庫管理使用者資料,結合 Node.js 實現後端的資料查詢與返回功能。
  5. 檔案上傳功能:透過 Multer 模組實現檔案上傳的支援。
  6. 日誌與監控:使用 Winston 記錄日誌,結合 PM2 等工具對伺服器進行監控和效能最佳化。
  7. 自動化部署:透過 Git 和 Webhook 實現高效的程式碼更新和部署。

亮點與技術深度

本文不僅展示了基礎開發流程,還擴充套件到日誌記錄、檔案上傳、資料庫整合等高階功能。你可以基於這些技術模組,進一步開發和擴充套件網站,如加入前端框架、實現負載均衡、高可用架構等。

下一步行動

如果你已經完成了本文的操作,那麼恭喜你成功搭建了一個功能齊全的小型網站!接下來,你可以:

  • 將網站釋出為生產環境應用,最佳化效能和安全性。
  • 擴充套件業務邏輯,如新增使用者註冊、登入認證等功能。
  • 深入學習前端框架和後端開發,提升全棧開發能力。

使用騰訊雲輕量應用伺服器,讓開發者能夠快速入門並掌握網站開發的全流程。期待你的專案能夠更上一層樓!

相關文章