部署GoogleCodelab到私有云服务器上

本文章将介绍如何创建一个具有Google Codelab风格的代码实验室网站，并部署到私有的云服务器上。完成部署后，你可以通过谷歌文档或markdown语言编写自己的代码实验教程，并将其发布到自己的代码实验室网站上。

Google Codelabs 是一个具备交互式教学方式的教程集合。它可以在谷歌文档上使用一些简单的格式规范编写，同时也支持markdown语言。^[1]

github：Tools for authoring and serving codelabs

参考博客：Publish Technical Tutorials in Google Codelab Format

代码实验室：CodeLab to Create a CodeLab

一、项目环境

以下步骤在本地客户端操作。

(一) 环境配置(for Windows)

1.安装Go语言

下载go的msi格式的二进制文件，进行安装：Downloads

检查go的版本，当显示版本号时，则安装成功

$ go version

2.安装Node.js 和 npm

安装nodejs 14

通过官网下载二进制文件进行安装： Downloads Node

检查node.js的版本，当显示版本号时，则安装成功

$ node --version
$ npm --version

3.安装gulp

进入到目录tools/site/，初始化npm

$ cd site
$ npm install

进入到目录tools/site/，安装gulp-cli

$ cd site
$ npm install -g gulp-cli

4.安装claat

输入以下命令，安装claat工具

$ go get -u -v -x github.com/googlecodelabs/tools/claat

或通过下载二进制文件，进行安装：Releases page

检查claat的版本号，若显示版本号，则安装成功

$ claat version

(二) 环境配置(for MacOS)

1.安装brew

输入以下命令，安装brew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

中国地区安装方法

$ /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

2.安装Go语言

输入以下命令，通过brew工具安装Go。这里需要安装对应的版本

$ brew install go

或者下载Go的二进制文件，进行安装 Downloads Go

检查go的版本，当显示版本号时，则安装成功

$ go version

3.安装Node.js 和 npm

输入以下命令，安装Node.js 14

$ brew search node
$ brew install node@14

或者通过官网下载二进制文件进行安装： Downloads Node

注意，因为codelab tools项目的限制，这里要安装对应的版本。

检查node.js的版本，当显示npm的版本号与node的版本号对应时，则安装成功

$ node --version
# v14.9.0
$ npm --version
# 6.14.8

4.安装gulp

进入到目录tools/site/，初始化npm

$ cd site
$ npm install

进入到目录tools/，安装gulp-cli

$ npm install gulp-cli
# + gulp-cli@2.3.0

注意，因为codelab tools项目的限制，这里也要安装对应的版本。

检查安装gulp的版本

$ gulp --version
# CLI version: 2.3.0

5.安装claat

进入到目录tools/site/，输入以下命令，安装claat^[2]

$ cd site
$ go get -u -v -x github.com/googlecodelabs/tools/claat

或者通过以下命令行下载

$ go install github.com/googlecodelabs/tools/claat@latest

检查claat的版本号，若显示版本号，则安装成功

$ claat version

或通过下载二进制文件，进行安装：Releases page

若是下载二进制的文件，下载完成后，将二进制程序移动到合适的目录。这里推荐移动到目录/Applications/中。

在控制台输入以下命令，给claat程序赋予执行权限

$ cd /Applications/
$ chmod +x claat

检查claat的版本号，若显示版本号，则安装成功

$ ./Applications/claat version

二、创建项目

克隆tools项目到本地。

$ git clone https://github.com/googlecodelabs/tools

在tools/site/目录下创建一个教程目录

$ mkdir codelabs

创建一个markdown文件，即可使用markdown来编写个codelab教程。

$ touch first_codelab.md

教程编写的格式见FORMAT-GUIDE。同时本地项目目录下也有文件副本。其目录是：tools/FORMAT-GUIDE.md。

在项目目录tools/sample下，也有一份官方已写好的样例副本。可以用于测试项目是否成功配置。这里可以将此目录下的文件，复制一份到刚刚建好的目录tools/site/codelas下。

三、导出项目和预览

导出单个教程的网页

$ cd tools/site/codelabs
$ ./Applications/claat export first_codelab_tutorial.md

执行此步骤后，我们将会看到单个教程网页的静态资源，它会在当前目录下生成。

构建codelabs站点

#在site目录下，执行以下方法指定要构建的项目目录
$ cd tools/site
$ gulp build --codelabs-dir=codelabs

执行后，会在tools/site目录下，生成build目录，里面存放用于预览的文件

预览网站效果

# 在site目录下，执行以下方法指定要预览的项目目录
$ cd tools/site
$ gulp serve --codelabs-dir=codelabs

执行此步骤后，通过命令行提示，访问localhost:4000，即可以预览自建的codelabs站点。

导出教程网站

如果我们需要将codelabs站点导出，部署到我们的私有云服务器上，则需要通过gulp打包。

# 在tools/site/目录下
$ cd tools/site
$ cp codelabs app/codelabs
$ gulp dist --codelabs-dir=codelabs

执行命令后，会为codelabs项目生成的是一个静态网站的资源，存放在tools/site/dist目录下。你可以通过各种方式将网站部署到私有的云服务器上。

四、部署产物到nginx服务

云服务器，我个人使用的是CentOS，并安装了nginx服务。

由于项目在dist目录下生成的是静态网站的所有资源，因此我们可以直接通过FTP或SFTP上传至云服务器，放到对应的网站根目录下，即可完成部署。

这里假设网站的根目录是usr/local/website/codelabs。连接上云服务器，在控制台输入命令，配置nginx文件。

$ vi /usr/local/nginx/nginx.conf

找到下列配置，配置好网站域名、网站的根目录。

server {
    listen      80;
    server_name 172.0.0.1 # <你的网站域名或ip>;
    root        usr/local/website/codelabs; # <你的网站项目地址>
    
    # ********

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    
    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
    
    # ********
}

键盘键入ESC按钮，输入:wq，保存文件退出。

执行命令，重启动nginx服务

$ nginx -c /usr/local/nginx/nginx.conf
$ nginx -s stop
$ nginx

到这一步，就将codelabs项目的网站部署到私有云服务器上了。通过访问自己站点的域名或ip，即可访问网站。

参考

1. CodeLab to Create a CodeLab [link] ↩
2. Codelabs command line tool [ink] ↩