今天我們要進入一個新的挑戰——後端開發！不管是前端還是後端，專案越大，壓力越大。尤其是對於初學者來說，後端開發常常像是在黑暗裡摸索，覺得困難重重。但其實，只要掌握正確的方法和心態，一步步來，後端開發也可以變得越來越順利，並結合 AI 工具像是 ChatGPT 的幫助，後端開發其實沒那麼困難。今天，我們就來帶你建立後端環境，讓你輕鬆掌握後端技術！
相較於前端，後端開發讓人覺得更難理解，因為前端開發能看到即時的畫面，而後端開發就像冰山下的部分，你無法直接「看到」發生了什麼，只能依靠回應和結果判斷，這也加劇了學習的難度。很多新手可能會覺得：「後端開發太難了，我根本不懂！」這種挫折感其實很常見，但透過正確的心理調適，你會發現後端並沒有那麼可怕。
當你開始搭建後端時，資料夾的結構會對專案的維護和開發效率產生巨大影響。為了避免程式碼過於混亂，我們需要建立有條理的資料夾結構，讓每個功能模塊都有各自的歸屬。
我們可以利用 Express 官方 的工具 Express Generator 來幫助我們快速建立基本的後端資料夾結構。這個工具能夠自動幫你建立初步的 Express 框架，省去手動配置的繁瑣過程。
首先，我們會使用 npx 命令來快速生成一個 Express 專案。
npx express-generator backend-project
cd backend-project
npm install
這樣就會建立好初步的專案結構，並自動安裝必要的依賴包。
Express Generator 幫我們生成了以下基本結構：
backend-project/
│
├── bin/ # 啟動伺服器的相關程式碼
├── public/ # 靜態資源
├── routes/ # 路由設定
├── views/ # 預設的視圖
├── app.js # 主應用程式
└── package.json # 專案設定與依賴
這個初步的架構已經足夠讓你開始簡單的後端開發，例如設計 API 路由和處理 HTTP 請求。
你可以使用 -h 或 --help 來查看 Express Generator 的所有選項：
$ express -h
這會列出所有可用的指令選項：
Usage: express [options] [dir]
Options:
-h, --help # 顯示幫助資訊
--version # 顯示 express-generator 版本號
-e, --ejs # 加入 EJS 模板引擎
--hbs # 加入 Handlebars 模板引擎
--pug # 加入 Pug 模板引擎
-H, --hogan # 加入 Hogan.js 模板引擎
--no-view # 不使用模板引擎
-v, --view <engine> # 加入指定模板引擎，如 EJS、Pug、Handlebars 等
-c, --css <engine> # 指定樣式表的預處理引擎，如 Less、Stylus、Sass
--git # 自動加入 .gitignore 檔案
-f, --force # 覆寫非空目錄
Express Generator 雖然能幫你快速建立基礎結構，但隨著專案的複雜度提升，你會發現它有些不足之處，尤其在專案規模變大時，可能需要自己調整和擴展資料夾結構。
當你開始擴展後端專案時，可以考慮加一些自訂的資料夾，例如 controllers、models、middlewares、services 等等，這樣能讓程式碼更具可讀性和可維護性。
project-root/
│
├── controllers/
│ └── userController.js
├── models/
│ └── userModel.js
├── routes/
│ └── userRoutes.js
├── middlewares/
│ └── authMiddleware.js
├── services/
│ └── userService.js
├── migrations/
│ └── 20230930-create-user-table.js
├── seeders/
│ └── 20230930-seed-users.js
└── app.js
這樣的分層設計可以讓專案保持條理清晰，未來即使功能越來越多，也不容易陷入混亂。
如果你剛接觸後端開發，看到 Express Generator 生成的 app.js 和 bin/www 這些檔案，可能會覺得有點摸不著頭緒，不過別擔心！我們可以透過 ChatGPT 來幫你一步步解釋這些檔案的作用，讓你更容易理解 Express 的運作方式。
app.js 是整個應用程式的大腦，它負責處理中介層（middlewares）、路由（routes）、錯誤處理，還有模板引擎的設定。這個檔案基本上就是你應用的核心邏輯。如果你對某些程式碼不太熟悉，像是 app.use(express.json()) 這些用法，可以把它直接貼到 ChatGPT 問：
"這行 app.use(express.json()) 是什麼意思？它在應用程式裡的作用是什麼？"
這樣你就能得到詳細解釋，像是：express.json() 這個中介層用來處理傳入的 JSON 格式資料，讓伺服器可以輕鬆讀取 JSON 格式的請求。
morgan）、解析 JSON（express.json）、處理靜態資源（express.static）等。app.js 定義了路由模組的使用方式，例如 / 路徑使用 indexRouter，/users 路徑使用 usersRouter。範例程式碼：
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// 設定視圖引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// 使用中介層
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 路由設定
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 處理 404 錯誤
app.use(function(req, res, next) {
next(createError(404));
});
// 錯誤處理
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
app.js 定義了整個 Express 應用的邏輯與配置，但它並不負責啟動伺服器，這是 bin/www 檔案的工作。ChatGPT 可以幫助你解釋這些設定背後的作用，讓你理解每個部分的功能。
再來看一下 bin/www 這個檔案，這個其實是啟動伺服器的腳本，負責監聽伺服器的端口，並讓應用開始運行。如果你不知道 server.listen(port) 是在做什麼，可以問 ChatGPT：
"這個 server.listen(port) 在伺服器裡是什麼意思？它的作用是什麼？"
ChatGPT 會告訴你這行程式碼是讓伺服器開始監聽某個特定的端口，準備接收請求。
www 檔案從 app.js 載入應用程式。3000。範例程式碼：
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('backend-project:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
這個檔案就是用來建立一個 HTTP 伺服器，並將你的 Express 應用綁定到 3000 port。
接下來，我們來確認伺服器是否成功啟動。步驟如下：
在終端輸入以下指令來啟動伺服器：
npm start
打開瀏覽器並輸入 http://localhost:3000/，你應該會看到 Express 的預設頁面，這就代表你的後端環境已經成功建立！
這樣你就完成了 Express 的後端環境設置！
把後端開發想成一個破關遊戲，每完成一個功能就像過了一個小關卡。剛開始你可能覺得路途遙遠，但每一步的進展都會讓你對後端的理解更加深入。現在的你可能只是學會建立伺服器，未來的你會熟練地設計複雜的 API 架構、優化資料庫查詢效能，甚至搭建大型系統。
所以，別害怕，後端開發其實沒那麼恐怖，只要你願意多花點時間和心思，最終你一定能成為一個全能的全端開發者！
iThome鐵人賽
看影片追技術