使用Docker创建Node.js的Web应用程序

2 年 ago

清, 宇

2 minutes

所以我的发现是，只有目标是通过非投入的方式实现自我价值的，才能真正地称为自我实现。

具备完成Progate的Node.js课程所需的知识。
能够使用Docker。
在VSCode中进行Docker入门。

本文所讨论的对象

在Progate上学习了Node.js。下一步，想要尝试做自己的项目的人。

在本文中即将讨论的内容

ブラウザ上でページを確認

环境

Docker：容器开发平台
VSCode：微软开发工具
Node 14.15：Node.js 版本 14.15
Git：分布式版本控制系统

创建项目

首先，在合适的位置创建项目文件夹。
在本文中，我使用了一个名为nodejs-sample-app的名字来创建。

然后，用VSCode打开该文件夹。

请创建以下文件

version: "3"
services:
  node:
    image: node:14.15
    volumes:
      - .:/project
    tty: true
    working_dir: /project
    command: bash

在代码中指定Node的版本为14.15。

进入容器并检查版本。

root@cf2295d42525:/project# node -v
v14.15.4

然后，项目的准备工作完成。

请使用npm命令从这里开始构建项目。

输入以下命令，会在项目中创建一个名为 package.json 的文件。

$ npm init -y

npm init 参考文档

root@cf2295d42525:/project# npm init -y
Wrote to /project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

只要在package.json中了解Node.js项目的各种信息就可以了。

创建一个js文件，在Web应用程序中首先被调用的，在与package.json相同的层级下创建如下：

console.log("Hello nodejs");

如果这样做的话，可以通过以下命令来验证是否执行。

root@cf2295d42525:/project# node app.js
Hello nodejs

当出现“Hello nodejs”的显示时，表示OK。

下一步是将 package.json 更改如下

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在修正main和测试脚本的末尾添加逗号，并添加scripts.start。

这样一来，在运行 npm start 后，就会调用在 scripts.start 中指定的命令。

root@cf2295d42525:/project# npm start

> project@1.0.0 start /project
> node app.js

Hello nodejs

这样就告一段落了。

现在进行git init会很好。

请安装并配置Express

表达Express的安装

$ npm install express

在 package.json 中添加以下内容

{
...
  "dependencies": {
    "express": "^4.17.1"
  }
}

然后，会生成一个名为node_modules的文件夹和一个名为package-lock.json的文件。

在node_modules文件夹中会存放安装的包。
因为我不想将其推送，所以我会创建一个.gitignore文件并将其放入其中。

node_modules/

由于已经安装并产生了差异，所以在这里进行提交。

创建路由

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

app.get('/', (req, res) => {
  res.send({message: "ok!"});
});

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));

当运行 npm start 命令时，会显示如下内容。

root@cf2295d42525:/project# npm start

> project@1.0.0 start /project
> node app.js

server started port 3000

然而，当前状态下无法在浏览器中打开。

需要在docker-compose中对端口进行描述。

version: "3"
services:
  node:
    image: node:14.15
    volumes:
      - .:/project
    tty: true
    working_dir: /project
    ports:
      - "3000:3000"
    command: npm start

我已经修改了配置，添加了端口，并在启动容器时执行了 npm start。

编辑了docker-compose文件后，需要重新创建容器。
先删除容器，然后执行以下操作。

$ docker-compose up -d

请确认服务器是否已正常启动，并查看日志。

nodejs-sample-app(main)$ docker-compose logs       
Attaching to nodejs-sample-app_node_1
node_1  | 
node_1  | > project@1.0.0 start /project
node_1  | > node app.js
node_1  | 
node_1  | server started port 3000

看起来很酷。

在浏览器中确认

ejs 可以在中国本地化

为了使用ejs，执行以下命令进行安装：

$ npm安装ejs

创建一个views文件夹，并在其中创建ejs文件。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
    <p><%= message %></p>
</body>
</html>

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

app.get('/', (req, res) => {
  res.render("index.ejs", {message: "うおおおおおお"})
});

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));

使用render函数渲染ejs，并嵌入”message”。