前言

本文实现内容：直接把本地的代码复制到服务器并且使用 docker 容器运行起来，全程不用写 docker 的配置文件，而是使用命令完成所有步骤。

采用的技术、框架

linux服务器： Ubuntu Server 20.04 LTS 64bit
后台服务： nodejs@14.15.1、expressjs@4.17
前端页面： react@17.0.2

前端页面代码

前端页面代码直接使用 npx create-react-app 创建，点击直达其官网

创建项目&运行

npx create-react-app my-app
cd my-app
npm start

如果 yarn start 运行正常，那就成功啦~

修改页面代码如下

修改 src/App.js 文件如下：

只是多加了一个请求 http://localhost:3000/json，这个地址在待会部署到 docker 后需要修改。

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";

function App() {
    const [data, setData] = useState();
    
    useEffect(() => {
        // 这个地址在待会部署到 `docker` 后需要修改。
        fetch("http://localhost:3000/json")
                .then((res) => res.json())
                .then((res) => { 
                    setData(res);
                });
    }, []);

    return (
            <div className="App">
                    <header className="App-header">
                            <img src={logo} className="App-logo" alt="logo" />
                            {/*把请求到的数据渲染出来*/}
                            <pre>
                                    {data && JSON.stringify(data)}
                            </pre> 
                    </header>
            </div>
    );
}

export default App;

后台服务代码

创建项目&运行

新建文件夹 server
在 server 文件夹内,在新建一个 index.js, 并且复制下面代码到文件中
执行 npm i 以初始化 package.json,
安装依赖 npm i express
运行 node index.js (如果不报错就 ok 啦~)

代码如下

下面代码启动 3000 端口的服务，并且提供一个 /json 的接口。

const express = require("express"); 
const app = express();
const port = 3000;
 
app.all("*", function (req, res, next) { 
	res.set({
		"Content-Type": "text/plain",
		"Access-Control-Allow-Credentials": "true",
		"Access-Control-Allow-Headers": "X-Requested-With,Content-Type,token,authorization",
		"Access-Control-Allow-Origin": "*",
		"Access-Control-Allow-Methods": "GET",
		"Content-Type": "application/json",
	});
	next();
});
 
app.get("/json", (req, res) => {
	res.json({
        name:"张三",
        age:18
    });
});

app.listen(port, () => {
	console.log(`服务正在运行： http://localhost:${port}`);
});

linux 服务器上面的文件结构

需要把刚刚创建都两个文件夹复制上服务器。我是用的 xftp, 目录结构如下。

docker 安装&容器创建

安装 docker

curl -sSL https://get.daocloud.io/docker | sh

安装完毕后执行命令 sudo docker run hello-world 如果和下面输入一样则成功了。

安装 nodejs 镜像

这里可以直接安装最新版 nodejs, 后面在容器内部在改成需要的版本即可。也可以直接安装某个版本，但是也没必要，反正在容器内可能也会用不同的版本。

docker pull node

安装完毕后执行命令 docker images 如果和下面输入一样则成功了。

创建前端静态资源服务的容器

docker run -itd -v /htmlProject/pc:/code --name web-server -p 80:80 node /bin/bash 

各参数说明
-itd  交互式操作、终端、后台运行这个容器
-v    文件映射，冒号前面的地址是宿主机的地址，后面的是容器内的地址 
-p    端口映射，冒号前面的端口是宿主机的，后面的是容器内的端口
node 是刚刚安装的 node 镜像
/bin/bash 表示启动容器后启动bash

执行完毕后执行命令 docker ps 存在下面的那个进程就成功了。

运行前端开发服务

注意：这里不打包代码，而是直接在服务器上运行 yarn start 来启动一个前端开发服务（为啥不打包？因为我想在服务器上面开发...）

1、执行命令 docker exec -it web-server /bin/bash 进入容器

可以看到进去后前面的用户名是变了的。

2、安装前端依赖&运行前端服务

先切换都代码目录 
cd code

切换个低一点的 nodejs 版本，不然没法运行起来的。
npm i node@14.15.1 -g

安装项目依赖
yarn install

这里修改下服务的默认端口，当然这一步是因为上面映射端口时把 80映射到80了，如果上面创建容器时 -p 80::3000 就不用执行这步骤，因为 react-script 默认用的 3000 端口，强烈建议使用 80:3000 
yarn reject  # 执行这个命令后记住按 y才会暴露出配置

修改配置文件
/scripts/start.js
搜索 process.env.PORT , 将后面的 3000 改为 80

运行项目, 注意哈，这里必须使用 nohup &
nohup yarn start &

上面说了 src/App.js 中的请求地址也别忘了改为你的服务器 ip ***

然后 ctrl d 退出容器

最后使用浏览器访问你的服务 ip,应该成功出现了部署的页面了，但是页面 js 会有报错，因为接口还没部署。

创建后台服务的容器

docker run -itd -v /htmlProject/server:/code --name node-server -p 3000:3000 node /bin/bash

执行完毕后执行命令 docker ps 存在下面的那个进程就成功了。

运行后台服务

1、执行命令 docker exec -it node-server /bin/bash 进入容器

可以看到进去后前面的用户名是变了的。

2、运行服务

先切换都代码目录 
cd code 

安装项目依赖
yarn install

运行项目, 注意哈，这里必须使用 nohup &
nohup node ./index.js &

然后 ctrl d 退出容器

最后使用浏览器访问你的服务 ip:3000/json

访问接口出现这个就成功啦~

最后再访问页面

一些常用的 docker 命令

删除容器 docker rm [容器名字]
起停容器 docker start/stop [容器名字]

😍都看到这里了的话，千万要给我点个赞，鼓励下我~

docker 部署nodejs服务 + react 项目运行时环境

前言