# はじめに

Google Search Console や Bing Webmaster Tools にサイトマップが登録できます。Next.js のプロジェクトでは、next-sitemap を使うとサイトマップの作成が簡単にできました。 
sitemap.xml 作成から Google Search Console、Bing Webmaster Tools に登録までを説明します。

<blockquote class="info">
【 サイトマップ 】
サイトマップ(sitemap)とは、検索サイトのクローラーにWebページの繋がりを認識させて、一つ一つ申請しなくてもクローリングしてくれるファイルです。
</blockquote>

 



・[next-sitemap](#anchor1) 
・[Google Search Console に登録](#anchor2) 
・[Bing Webmaster Tools に登録](#anchor3) 
・[「サイトマップを読み込めませんでした」について](#anchor4)

 

<a class="anchor" id="anchor1"></a>

# next-sitemap

Next.js のプロジェクトをビルド時に自動的に sitemap.xml を生成するように改造します。 
改造と言うほどでもなく、next-sitemap を組み込むだけになります。 
(参考サイト：<a href="https://fwywd.com/tech/next-sitemap" target="_blank">https://fwywd.com/tech/next-sitemap</a>) 
 

## Step 1

next-sitemap をインストールします。 
※例として、/work/itc-blog が Next.js プロジェクトトップとします。

```sh
$ cd /work/itc-blog
$ npm install next-sitemap
```

これにより、next-sitemap がインストールされて、package.json に以下のように書き込まれます。

```json
"next-sitemap": "^1.6.140",
```

 

## Step 2

next-sitemap の設定ファイルを作成します。

```sh
$ vi sitemap.config.js
```

```javascript
module.exports = {
 siteUrl: 'https://itc-engineering-blog.netlify.app',
 changefreq: 'weekly',
 generateRobotsTxt: true,
 sitemapSize: 7000,
 outDir: './out',
};
```

<blockquote class="warn">
デフォルトは、 next-sitemap.js ですが、ESLintを使っているため、sitemap.config.jsとします。この後、*.config.jsのLint(文法チェック)を行わないようにします。
</blockquote>
意味は以下の通りです。

<code>siteUrl</code>： サイトのトップページ URL です。 
<code>changefreq</code>： サイトの更新頻度です。always,hourly,daily,weekly,monthly,yearly,never から選べます。この頻度でクローラーが見に来るようになるようですが、嘘をつくとかえって見に来なくなるという話もありますので、なるべく本当の値にした方がよさそうです。全ページこの値になります。 
<code>generateRobotsTxt</code>： robots.txt(クローラーに見せたくないところを設定するファイル)を生成するかどうかの設定です。true だけの場合、特に制限なしの robots.txt が生成されます。 
<code>sitemapSize</code>： sitemap.xml は分割配置できるのですが、分割基準の閾値です。単位は、公式サイトにも書かれていなくて、分かりませんでした。 
<code>outDir</code>： どこに sitemap.xml を出力するかの設定です。Next.js プロジェクトの場合何も指定しないと、./out にビルド結果が出力されますので、これに合わせます。

 

## Step 3

※必須ではありません。
ESLint の設定で、*.config.js の Lint(文法チェック)を行わないようにします。 
以下のように `"ignorePatterns": ["*.config.js"]` を追加します。

```sh
$ vi .eslintrc.json
```

```js
{
 "env": {
・・・
 },
 "ignorePatterns": ["*.config.js"]
}
```

 

## Step 4

package.json のところに、ビルドコマンド 
`next-sitemap --config sitemap.config.js` 
を追加します。 
 
●「<a href="https://itc-engineering-blog.netlify.app/blogs/ydznz8j2o" target="_blank">Strapi と Next.js を使って静的ウェブサイトを構築</a>」のときのようにビルドしたものを置くだけの場合 
↓

```json
{
 ・・・,
 "scripts": {
 ・・・,
 "build": "next build && next export && next-sitemap --config sitemap.config.js",
 ・・・
 },
・・・
```

 

●「<a href="https://itc-engineering-blog.netlify.app/blogs/efxq_5j84z" target="_blank">Next.js microCMS GitHub Netlify で Jamstack なブログを公開</a>」のときのように Netlify にデプロイする場合 
↓

```json
{
 ・・・,
 "scripts": {
 ・・・,
 "export": "next build && next export",
 "postexport": "next-sitemap --config sitemap.config.js",
 ・・・
 },
・・・
```

`export`の下に、`"postexport": "next-sitemap --config sitemap.config.js",` の行を追加になります。 
ちなみに、２回失敗したのですが、以下のような状況でした。

```json
"export": "next build && next export && next-sitemap --config sitemap.config.js",
```

⇒sitemap.xml が作成されませんでした。（ただし、Google Search Console がエラーになっただけで、そう思っただけかもしれません。） 
 

```json
"postbuild": "next-sitemap --config sitemap.config.js",
```

⇒post[ビルドコマンド]で、ビルド後に実行する意味になりますが、ビルドコマンドが export で設定してあるため、無視されました。 
 

```json
"postexport": "next-sitemap --config sitemap.config.js",
```

⇒ ビルドコマンドが export で設定してあるため、ビルド後に実行されて、無事 sitemap.xml が作成されました。

 

## Step 5

ビルドします。
 
●「<a href="https://itc-engineering-blog.netlify.app/blogs/ydznz8j2o" target="_blank">Strapi と Next.js を使って静的ウェブサイトを構築</a>」のときのようにビルドしたものを置くだけの場合 
↓

```sh
$ npm run build
```

⇒./out/sitemap.xml と ./out/robots.txt が作成されます。

 

●「<a href="https://itc-engineering-blog.netlify.app/blogs/efxq_5j84z" target="_blank">Next.js microCMS GitHub Netlify で Jamstack なブログを公開</a>」のときのように Netlify にデプロイする場合 
↓ 
一旦 GitHub に push して、Netlify で Deploy site です。

 

<a class="anchor" id="anchor2"></a>

# Google Search Console に登録

左のメニューから「サイトマップ」をクリックします。 
新しいサイトマップの追加に「sitemap.xml」を入力します。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image1.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image1.png" alt="" loading="lazy"></a>

<blockquote class="info">
今回、out直下、つまり、ドキュメントルートに作成する設定でしたので、パス無しの「sitemap.xml」だけの入力です。
</blockquote>
 
「送信」ボタンをクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image2.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image2.png" alt="" loading="lazy"></a>
 
・・・で、登録されるはずですが、登録されませんでした。
 
 

`サイトマップを読み込めませんでした` 
`一般的な HTTP エラー` 
`サイトマップにアクセスしようとした際にエラーが発生しました。サイトマップがガイドラインに従っており、指定した場所からアクセスできることを確認してから、再送信してください。` 
`HTTP エラー: 404` 

となっています。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" alt="" loading="lazy"></a>
 
⇒下記 [「サイトマップを読み込めませんでした」について](#anchor4) を参照してください。

 

<a class="anchor" id="anchor3"></a>

# Bing Webmaster Tools に登録

左のメニューから「サイトマップ」をクリックし、「サイトマップを送信」をクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image4.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image4.png" alt="" loading="lazy"></a>
 
「`https://itc-engineering-blog.netlify.app/sitemap.xml`」を入力し、「送信」ボタンをクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image5.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image5.png" alt="" loading="lazy"></a>
 

<blockquote class="info">
今回、out直下、つまり、ドキュメントルートに作成する設定でしたので、トップページURLと「sitemap.xml」だけの記述です。
</blockquote>
 
登録されました。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image6.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image6.png" alt="" loading="lazy"></a>
 
 

<a class="anchor" id="anchor4"></a>

# 「サイトマップを読み込めませんでした」について

Google Search Console にサイトマップを登録できませんでした。 
同じ内容、URL で、Bing Webmaster Tools には登録成功しました。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" alt="" loading="lazy"></a>
 
<a href="https://support.google.com/webmasters/community?hl=ja" target="_blank">コミュニティ</a>を見ると、何度も同じような問題の投稿があります。 
「500 ページ以下の場合、sitemap.xml を登録してもしなくても同じ」という記述が見られるため、今のところ、問題無いかなという状況です。 
進展が有り次第、更新する予定です。

 

## URL 検査

Google Search Console で `https://itc-engineering-blog.netlify.app/sitemap.xml` を URL 検査しましたが、問題ありませんでした。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image7.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image7.png" alt="" loading="lazy"></a>
HTTP エラー: 404 と矛盾しています。 
もしかしたら、一度、本当に HTTP エラー: 404 を起こしてしまったので、それを覚えているかもしれません。

 

## sitemap.xml の存在確認

ブラウザの URL 欄に「`https://itc-engineering-blog.netlify.app/sitemap.xml`」を入力し、アクセスすると、xmlが表示されるため、問題ありません。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image8.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image8.png" alt="" loading="lazy"></a>
 

```sh
# curl https://itc-engineering-blog.netlify.app/sitemap.xml
```

でも取得できました。

 

## Validate XML Sitemap

sitemap.xml の内容に問題が有るのかなと思い、<a href="https://www.xml-sitemaps.com/validate-xml-sitemap.html" target="_blank">`https://www.xml-sitemaps.com/validate-xml-sitemap.html`</a>で検査してみましたが、問題ありませんでした。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image9.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image9.png" alt="" loading="lazy"></a>

 

## robots.txt テスター

robots.txt に問題が有って、Google から見られないのかなと思い、 <a href="https://support.google.com/webmasters/answer/6062598?hl=ja" target="_blank">robots.txt テスター</a> にてテストしましたが、問題ありませんでした。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image10.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image10.png" alt="" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image11.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image11.png" alt="" loading="lazy"></a>

 

## ファイル名変更

別のファイル名「sitemap2.xml」を置いて、間違いなく存在することも確認し、送信してみました。 
「サイトマップを読み込めませんでした。」となりました。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image12.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image12.png" alt="" loading="lazy"></a>

 

## サイトマップ削除

削除 → 登録としてもダメでした。 
一旦、削除して、一ヵ月後くらいにやり直そうと思います。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/deletesitemap.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/deletesitemap.gif" alt="" loading="lazy"></a>

Google Search Console や Bing Webmaster Tools にサイトマップが登録できます。Next.js のプロジェクトでは、next-sitemap を使うとサイトマップの作成が簡単にできました。 sitemap.xml 作成から Google Search Console、Bing Webmaster Tools に登録までを説明します。 ・next-sitemap ・Google Search Console に登録 ・Bing Webmaster Tools に登録 ・「サイトマップを読み込めませんでした」について

Next.js next-sitemapで静的Webサイトのサイトマップを作成

ラズパイでBME280センサから取得した温湿度気圧をWeb画面に表示する wiringpi-php-bme280(GitHub) というのを作りました。 こちらは、phpのプログラムですが、同じことがpythonでもできるはずです。 そこで、まず、ツールでphp→pythonの変換をして、それを元に開発することにしました。今回は、変換ツール（トランスパイラ）の選定と試した結果を書きたいと思います。  【 トランスパイル(transpile) 】  トランスパイル(transpile)とは、あるプログラミング言語から他のプログラミング言語へと変換（翻訳）することです。変換ツールをトランスパイラと呼びます。JavaScriptのBabelが有名です。

php→pythonのトランスパイル

# はじめに
弊社のWebサイト(<a href="https://itccorporation.jp" target="_blank">https://itccorporation.jp</a>)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。
※用語については、下にまとめて簡単に解説があります。

図で示すと、以下のようになっています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

<a href="https://itccorporation.jp" target="_blank">https://itccorporation.jp</a>のソースコードは、GitHubにあります。(<a href="https://github.com/itc-lab/itccorporation" target="_blank">https://github.com/itc-lab/itccorporation</a>)
今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。

<blockquote class="alert">
Webサーバー（上の図で言うと一番右）のところの解説は省略します。
</blockquote>

 

・[Node.jsインストール](#anchor1) 
・[Strapiインストール](#anchor2) 
・[Webサイトソースコードの配置](#anchor3) 
・[Strapi初期設定](#anchor4) 
・[Strapiでデータスキーマ作成](#anchor5) 
・[Strapiでデータ登録](#anchor6) 
・[GraphQL有効化](#anchor7) 
・[Webサーバーへデプロイ](#anchor8) 

 

<blockquote class="info">
【 Next.js 】
「Next.js」とは、Vercel社が開発したReactのフレームワークです。
Static Site Generator（SSG）・静的サイトジェネレーターとしての役割を果たします。
</blockquote>

<blockquote class="alert">
Next.jsのnext/image(Imageコンポーネント)による画像最適化を使う場合、VercelにデプロイするかCloudinaryなどの外部CDNを使う必要があります。※2021/07現在
</blockquote>

<blockquote class="info">
【 React 】
「React」とは、Facebook社が開発したJavaScriptのフレームワークです。
コンポーネントと呼ばれる部品（ＵＩ・画面の一部分）ごとに開発ができます。画面更新の際、差分を検出して差分だけ更新するため、動作が速いという特徴があります。
</blockquote>

<blockquote class="info">
【 静的Webサイト 】
決まった内容を表示するだけのサイトです。ユーザーによって画面が切り替わったり、入力内容によって切り替わったり、サーバー側に何らかの処理が必要な場合は動的Webサイトになります。
</blockquote>

<blockquote class="info">
【 ヘッドレスCMS 】
まず、「CMS」とは、WordPressのように全体の枠（決まったデザイン）ができあがっていて、その中に記事を書き込みできるなどのコンテンツの管理システムの事です。「ヘッドレスCMS」とは、全体の枠（決まったデザイン）が無く、記事の内容（コンテンツ）だけを登録し、APIによって取り出されるというものです。ヘッドレスCMSの場合、その都度デザインを作らないといけませんが、反面、自由です。ヘッドレスCMS提供サービスは、Contentful、microCMS、Strapi、などいろいろあります。
</blockquote>

<blockquote class="info">
【 Strapi 】
ヘッドレスCMSの一つですが、クラウドのWebサービスのみならず、ソースコードが公開されているため、それを利用し、自分が管理しているサーバーにヘッドレスCMS、APIを構築できます。
</blockquote>

 

<blockquote class="warn">
今回の検証環境は、
<code>Ubuntu 20.04.2 LTS</code>
<code>node v14.17.2</code>
になります。
</blockquote>

<blockquote class="alert">
ソースコードの解説は行いません。
Google reCAPTCHAは、設定済みで、キーは取得済みとします。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# Node.jsインストール

<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

パッケージを最新にします。※必須ではありません。

```sh
# apt update
# apt upgrade
Do you want to continue? [Y/n]Y
```
※以降基本的にYのため、-yを付けます。 
　-y は、? [Y/n]: のようなときに自動的に y とするオプションです。

 

curlをインストールします。

```sh
# apt install -y curl
```

 

node 14.x をインストールします。

```sh
# curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
# bash nodesource_setup.sh
# apt install -y nodejs
# node -v
v14.17.2
```

<blockquote class="info">
<code>node</code>のバージョンはインストール時期によって異なります。
</blockquote>

<blockquote class="info">
Node.jsのパッケージ管理システム<code>npm</code>も同時にインストールされます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# Strapiインストール

空の状態のStrapiをインストールします。 
今回、`/home/admin/mycorporation_backend`にインストールします。

```sh
# cd /home/admin
# npx create-strapi-app mycorporation_backend --quickstart
→そのまま起動してくるため、CTRL+Cで停止
```

<blockquote class="info">
【 npx 】
<code>npm</code>で管理されたプログラムの一つです。<code>npx</code>を使うと、オンメモリで依存関係を解決した状態で、引数に指定したプログラムを実行できます。ディスクを汚さず、一度きりしか実行しないプログラムを実行するのに向いています。
</blockquote>

 

<a class="anchor" id="anchor3"></a>

# Webサイトソースコードの配置
## ソースコード展開
<a href="https://github.com/itc-lab/itccorporation" target="_blank">https://github.com/itc-lab/itccorporation</a> からソースコードをダウンロードして、独自プロジェクトとします。 
Code → Download ZIP で itccorporation-master.zip をダウンロードします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image1.png)

 

ソースコードを展開し、ディレクトリをリネームします。 
※ここでは、`/home/admin/mycorporation_frontend`とします。

```sh
# cd /home/admin
# unzip itccorporation-master.zip
# mv itccorporation-master mycorporation_frontend
# cd mycorporation_frontend
```

 

## 環境変数変更
環境変数を自分の環境に合わせます。

```sh
# cp .env.local.example .env.local
# vi .env.local
GRAPHQL_API=http://localhost:1337/graphql
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

 

**GRAPHQL_API** 
今回、1337ポートで動くStrapiの機能を利用するため、`http://localhost:1337/graphql` のままにします。

 

**NEXT_PUBLIC_RECAPTCHA_SITE_KEY** 
Google reCAPTCHAの「サイトキーをコピーする」に表示される文字列です。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image2.png" alt="" width="600px">

 

## 環境変数変更
以下の図のようにシンボリックリンクを作成します。 
`uploads`ディレクトリは、Strapiからアップロードした画像ファイルが格納されるディレクトリになります。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/symlink.svg)

```sh
# ln -s /home/admin/mycorporation_backend/public/uploads public/uploads
```

 

<a class="anchor" id="anchor4"></a>

# Strapi初期設定

Strapiを起動します。

```sh
# cd /home/admin/mycorporation_backend
# npm run develop
```

何も設定変更していない時は、1337ポートで起動します。 
ブラウザから `http://[Strapiを起動したサーバーのIPアドレス]:1337` にて、アクセスします。

「Create the first administrator」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image3.png" alt="" width="600px">
 
「First name」「Last name」「Email」「Password」「Confirmation Password」を入力し、「LET'S START」をクリックします。
※「Email」は、ログインＩＤに使われます。メールの設定をしない場合、メールは送信されません。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image4.png" alt="" width="600px">
 

 

<a class="anchor" id="anchor5"></a>

# Strapiでデータスキーマ作成
Strapiでスキーマ（空のテーブル）を作成していきます。 
 
「Content-Types Builder」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image5.png" alt="" width="600px">
 
「＋Create new collection type」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image6.png" alt="" width="600px">
 
「Display name」のところに "Available" と入力し、「Continue」ボタンをクリックします。 
→ＤＢで言うAvailableテーブルを作成するイメージです。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image7.png" alt="" width="600px">
 
「Text」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image8.png" alt="" width="600px">
 
「Name」のところに "name" と入力し、「Short text」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image9.png" alt="" width="600px">
 
「Media」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image10.png" alt="" width="600px">
 
「Name」のところに "logo" と入力し、「Single media」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
→単一画像を登録できるフィールドになります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image11.png" alt="" width="600px">
 
・・・以降、下記の[スキーマ](#schema)の通りに作成します。 
（Textは全て「Short text」、Mediaは全て「Single media」です。） 
 
Relationのところは、以下のように、左側に "seo_Images" を入力して、右矢印が複数のアイコンを選択、右側で Seo-Image を選択します。 
→これにより、OpenGraphテーブルのseo_imagesフィールドは、Seo-Imagesテーブルの複数のデータに紐づけが可能になります。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image12.png" alt="" width="600px">
 
Twitterは、「SINGLE TYPE」→「Create new single type」で作成します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image13.png" alt="" width="600px">
 

<a class="anchor" id="schema"></a>

スキーマ 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image14.png" alt="" width="300px">

 

<a class="anchor" id="anchor6"></a>

# Strapiでデータ登録
データを登録していきます。 
 
「Availales」をクリックし、「Add New Availables」をクリックします。※作ったのは「Available」テーブルですが、自動的に複数形表示になります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image40.png" alt="" width="600px">
 
「Name」：Strapi 
「Description」：ストラピ 
「Priority」：1 
「Logo」：Strapiのロゴ画像をドラッグ＆ドロップ
とし、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image15.png" alt="" width="600px">
 
「Publish」ボタンをクリックします。 
→「Publish」ボタンを押さないと有効化されませんので、毎回忘れずに押します。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image16.png" alt="" width="600px">
 
他、以下のように登録していきます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image17.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image18.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image19.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image20.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image21.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image22.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image23.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image24.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image25.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image26.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image27.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image28.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image29.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image30.png" alt="" width="500px"> 
OpenGraphsの「Seo_images」のところですが、Seo-imageテーブルのデータと紐づけるため、選択します。（複数選択可能です。） 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image31.png" alt="" width="300px">
 

 

<a class="anchor" id="anchor7"></a>

# GraphQL有効化
## GraphQLインストール
<blockquote class="info">
【 GraphQL 】
「GraphQL」とは、Facebookにより開発されたAPI用のクエリ言語です。似たものとして、「REST」がありますが、「GraphQL」の方は、"全部"では無く、"これとこれとこれ"という感じで、あらかじめ対象データを指定して、命令を出せるという特徴があります。
</blockquote>

「Marketplace」をクリックし、「GRAPHQL」のところの「Download」ボタンをクリックします。 
→しばらくすると、StrapiにGraphQL機能が組み込まれます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image32.png" alt="" width="600px">
 

http://[StrapiのサーバーIPアドレス]/graphql
にアクセスすると、クエリを発行してテストすることができます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image33.png" alt="" width="600px">
 
→この時点では、「Forbidden」が返り、うまくいきません。Strapi側のアクセス権の設定が必要です。

 

## アクセス権の設定
「Settings」→「Roles」→「Public」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image34.png" alt="" width="600px">
 
「find」、「findone」チェックボックス全てにチェックを入れて、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image35.png" alt="" width="600px">
 
再び、`http://[StrapiのサーバーIPアドレス]/graphql` にアクセスし、クエリを実行すると、データが取り出せることが確認できます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image39.png" alt="" width="600px">
 

 

## 動作確認

<blockquote class="warn">
Strapiが起動（<code>npm run develop</code>）したままで下記の実施が必要です。起動していない場合、データの取り出しに失敗します。
</blockquote>

Webサイトのプログラムの方へ戻って、`npm install`を実行します。 
→これにより、`package.json`に書かれた必要なもの全てが自動的にインストールされます。

```sh
# cd /home/admin/mycorporation_frontend
# npm install
```

インストールが終わったら、起動します。

```sh
# npm run dev
```

 

`http://[IPアドレス]:3000/` でアクセスします。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image37.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image38.png" alt="" width="500px"> 

 

表示されました！

 

<a class="anchor" id="anchor8"></a>

# Webサーバーへデプロイ

Webサーバーへデプロイは簡単です。

```sh
# npm run build
```

を実行すると、カレントディレクトリに out ディレクトリができますので、これをドキュメントルートへ移動するだけになります。 
→例えば、`mv out /var/www/html` のようにWebサーバーが参照する場所に置くだけになります。 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

 

`https://[WebサイトのFQDN]/` でアクセスします。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 

 

できました！

弊社のWebサイト(https://itccorporation.jp)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。 ※用語については、下にまとめて簡単に解説があります。 図で示すと、以下のようになっています。 https://itccorporation.jpのソースコードは、GitHubにあります。(https://github.com/itc-lab/itccorporation) 今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。 Webサーバー（上の図で言うと一番右）のところの解説は省略します。 ・Node.jsインストール ・Strapiインストール ・Webサイトソースコードの配置 ・Strapi初期設定 ・Strapiでデータスキーマ作成 ・Strapiでデータ登録 ・GraphQL有効化 ・Webサーバーへデプロイ

StrapiとNext.jsを使って静的ウェブサイトを構築

このブログ「ITC Engineering Blog」は、Next.js、ヘッドレスCMSのmicroCMS、GitHub、ホスティングサービスNetlifyで構成されています。いわゆるJamstack構成です。このブログのソースコードは、GitHubにあります。(https://github.com/itc-lab/itc-blog) 今回は、このソースコードを使い、Netlifyにデプロイし、最終的にブログ記事をアップするところまで行いたいと思います。

Next.js microCMS GitHub NetlifyでJamstackなブログを公開

前回、OS.jsインストールと公式アプリの追加をやってみましたが、 今回、既存のWebサイトをOS.jsのアプリのように組み込む方法とnginxで振り分ける方法を実践していきます。 【 Nginx 】 Nginx(エンジンエックス)は、オープンソースのWebサーバです。処理性能・高い並行性・メモリ使用量の小ささに焦点を当てて開発されており、HTTP, HTTPS, SMTP, POP3, IMAPのリバースプロキシの機能や、ロードバランサ、HTTPキャッシュなどの機能も持ちます。 ・OS.jsバックグラウンド起動設定 ・Rocket.Chat組み込み ・Wekanの組み込み ・GitLabの組み込み ・nginxインストール ・動作確認

OS.jsにiframeアプリを組み込んでnginx(エンジンエックス)で振り分ける

# はじめに
ブラウザのみでデスクトップ環境を構築できる「OS.js(<a href="https://demo.os-js.org/" target="_blank">https://demo.os-js.org/</a>)」というのを見つけました。 
きっかけは、SynologyのDSM(<a href="https://demo.synology.com/ja-jp/dsm" target="_blank">https://demo.synology.com/ja-jp/dsm</a>)がどういう仕組みで動いているか気になり、調べていたところ、
Sencha Ext JSというJavaScriptフレームワークが使われているようなのは、分かったのですが、ソースコードは無く、それ以上の追及は断念し、似たものが無いか探したことです。
結果、似たものとしてOS.jsが見つかりました。 

 

OS.jsは、Node.jsで動くSPA(Single Page Application)になります。 
OS.jsのプログラムは、サーバー側で処理するプログラムとクライアント（ブラウザ）側で処理するプログラムがあり、どちらもJavaScriptです。<a href="https://github.com/os-js/OS.js" target="_blank">ソースコード</a>が公開されています。 
ライセンスは、BSD 2-Clause License になります。

 

今回、OS.jsのインストールと、アプリを組み込む方法が分かりましたので、実践していきます。

 

・[OS.jsインストール](#anchor1) 
・[OS.jsを動かしてみる](#anchor2) 
・[OS.jsのアプリを組み込んでみる](#anchor3) 
・[OS.jsの作者について](#anchor4) 

 

<blockquote class="info">
【 Node.js 】
「Node.js」とは、サーバーサイドでJavaScriptを動かせるプラットフォーム（環境）のことです。
ソフトウェア名は、「node」です。nodeでWebサーバー機能が実装されたJavaScriptプログラムを動かすと、Apache httpdやnginxのようにWebサーバーとして機能させることができます。
</blockquote>

<blockquote class="info">
【 SPA(Single Page Application) 】
シングルページアプリケーションの名の通り、一つの画面で成り立っているWebサイトのことです。Webページを開くと大量のJavaScriptがダウンロードされて、ほとんどの処理をブラウザ側で行う仕組みです。サーバーへの通信が少ないため、高速で動作する一方、開くのに時間がかかるという欠点があります。（商品を販売するサイトには向いていません。）
SPAの典型例として、
OS.js（<a href="https://demo.os-js.org/" target="_blank">https://demo.os-js.org/</a>）
SynologyのDSM(<a href="https://demo.synology.com/ja-jp/dsm" target="_blank">https://demo.synology.com/ja-jp/dsm</a>)
QNAPのQuTScloud(<a href="https://www.qnap.com/ja-jp/live-demo/" target="_blank">https://www.qnap.com/ja-jp/live-demo/</a>)
が挙げられます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/spa.svg" alt="">
</blockquote>

<blockquote class="info">
【 BSD 2-Clause License 】
変更の有無を問わず、ソースやバイナリ形式での再配布や利用は、次の条件を満たせば許可される。
ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。
とあり、「MIT License」と同等のライセンスであり、同じ内容のLICENSEファイルが含まれていれば、商用利用、修正、配布、サブライセンス可で、何が起きても作者の責任は免除されます。
</blockquote>

<blockquote class="warn">
今回の検証環境は、
<code>CentOS Linux release 7.6.1810</code>
<code>node v12.18.3</code>
になります。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# OS.jsインストール

OS.jsを/opt/OS.jsにインストールします。

```sh
# cd /opt/
# git clone https://github.com/os-js/OS.js.git
# cd OS.js
# rm -f package-lock.json
# npm install
# npm install @osjs/example-application
# npm run package:discover
# npm run build
```

<blockquote class="info">
<code># npm install</code>
でOS.jsインストールは終わりですが、今回、
<code>@osjs/example-application</code>
を組み込んでいます。
</blockquote>

 

必須では無いですが、デバッグできるように、クライアント（ブラウザ）側のJavaScriptソースコードを組み込みます。

```sh
# git clone https://github.com/os-js/osjs-client.git
# mv osjs-client src/
# cd src/osjs-client
# npm install
# npm run build
# cd /opt/OS.js
# npm install --save file:src/osjs-client
# npm run build
```

 

こちらも必須では無いですが、共通機能のJavaScriptソースコードを組み込みます。

```sh
# git clone https://github.com/os-js/osjs-common.git
# mv osjs-common src/
# cd src/osjs-common
# npm install
# npm run build
# cd ../../
# npm install --save file:src/osjs-common
# npm run build
```

 

OS.jsは、標準でポート8000で起動するため、ファイアウォールを開放します。 

```sh
# firewall-cmd --zone=public --add-port=8000/tcp --permanent
# firewall-cmd --reload
```

 

OS.jsを起動します。

```sh
# npm run serve
```

 

`https://192.168.▲.▲:8000/` 
でアクセスします。 
192.168.▲.▲は、OS.jsを起動したサーバーのIPアドレスです。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image1.png)

 

アクセスできました！

 

`@osjs/example-application` 
はこのように組み込まれています。 
中身は何も無いですが、このコード(<a href="https://github.com/os-js/osjs-example-application" target="_blank">https://github.com/os-js/osjs-example-application</a>)を真似すれば、オリジナルのアプリを組み込めるということです。 
↓ 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs1.gif)

 

サーバーとのコネクションは、WebSocketを使って、監視しているようです。サーバーを停止すると、メッセージが表示されます。 
↓ 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image2.png)

<blockquote class="info">
【 WebSocket 】
WebSocket（ウェブソケット）は、単一のTCPコネクション上に双方向通信のチャンネルを提供する、コンピュータの通信プロトコルの1つです。
Node.jsの場合、「ws」あるいは、「socket.io」ライブラリを使って実装できます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# OS.jsを動かしてみる
「File Manager」を動かしてみます。 
パソコンのファイルをドラッグ＆ドロップでアップロードして、OS.js上で開いています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs2.gif)

 

フォルダのドラッグ＆ドロップはダメなようです。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image3.png)

 

フォルダを作成して、先ほどのファイルをコピー＆ペーストしています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs3.gif)

 

その他、電卓、Draw系アプリ等々、OS.js標準機能でいろいろ入っています。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image4.png)

 

<a class="anchor" id="anchor3"></a>

# OS.jsのアプリを組み込んでみる
## テトリス
公式リポジトリのアプリ`@osjs/tetris-application`を組み込みます。

```sh
# npm install @osjs/tetris-application
# npm run package:discover
```

ブラウザの中でテトリスが動きます！

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs4.gif)

 

ちなみに、JavaScriptのテトリス自体は、OS.js作者とは別の方が作成していて、独立したプログラムです。(<a href="https://github.com/jakesgordon/javascript-tetris/">https://github.com/jakesgordon/javascript-tetris/</a>) これをOS.jsの中に組み込んでいることになります。

 

## ターミナル

公式リポジトリのアプリ`npm install @osjs/xterm-application`を組み込みます。

```sh
# npm install @osjs/xterm-application
# npm run package:discover
# vi src/server/config.js
```

 

そのままの場合、「demo」ユーザーのパスワードを聞かれますので、 
`public: path.resolve(root, 'dist')`の末尾にカンマと
<pre><code> xterm: {
 login: false
 }</code></pre>
の３行を追加します。

```sh
module.exports = {
 root,
 port: 8000,
 public: path.resolve(root, 'dist'),
 xterm: {
 login: false
 }
};
```

ブラウザの中でターミナルが動きます！

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs5.gif)

 

以下の図のようにアクセス制限が有る場合、プロキシ的な使い方ができると思います。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/terminal.svg)

 

<a class="anchor" id="anchor4"></a>

# OS.jsの作者について
ノルウェーの Anders Evenrud という方が個人で開発していて、2021年5月現在、頻繁に更新されています。
エンジニアとして働く傍ら、お金を稼ぐつもりは無く趣味で開発されているようです。 
（公式サイトのチャットで本人談より）

ブラウザのみでデスクトップ環境を構築できる「OS.js(https://demo.os-js.org/)」というのを見つけました。 きっかけは、SynologyのDSM(https://demo.synology.com/ja-jp/dsm)がどういう仕組みで動いているか気になり、調べていたところ、 Sencha Ext JSというJavaScriptフレームワークが使われているようなのは、分かったのですが、ソースコードは無く、それ以上の追及は断念し、似たものが無いか探したことです。 結果、似たものとしてOS.jsが見つかりました。 OS.jsは、Node.jsで動くSPA(Single Page Application)になります。 OS.jsのプログラムは、サーバー側で処理するプログラムとクライアント（ブラウザ）側で処理するプログラムがあり、どちらもJavaScriptです。ソースコードが公開されています。 ライセンスは、BSD 2-Clause License になります。 今回、OS.jsのインストールと、アプリを組み込む方法が分かりましたので、実践していきます。 ・OS.jsインストール ・OS.jsを動かしてみる ・OS.jsのアプリを組み込んでみる ・OS.jsの作者について

Node.jsのSPA「OS.js」について

# はじめに
 
Wekan Open-Source kanban 
をソースコードを使ってインストールしてみました。 
 
Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 
ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 
同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 
 
インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) 
 
別記事<a href="https://itc-engineering-blog.netlify.app/blogs/knfpjkzmc1" target="_blank">「CentOS8にwekanをインストール(snap編)」</a>では、snapを使い、インストールしましたが、今回は、snapを使わず、dockerでもなく、ソースからインストールしていきます。 
<a href="https://github.com/wekan/wekan" target="_blank">github.com/wekan</a> から rebuild-wekan.sh というのを見つけて、この内容を行えばできそうと思い、やってみました。 
基本的に rebuild-wekan.sh の内容通りでしたが、今回の環境の場合、CentOSのため、rebuild-wekan.sh の序盤 apt-get でいきなりコケますので、dnf, yumで代替して進めています。

 

# インストール準備
 
<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

 

git cloneでソースコードをコピーしたいので、gitをインストールします。 
```sh
# dnf install git
Is this ok [y/N]: y
```
※以降基本的にyのため、-yを付けます。 
　-y は、? [y/N]: のようなときに自動的に y とするオプションです。 

<blockquote class="info">
dnf = Dandified Yum（ダンディファイド ヤム、略してDNF）
は、RPMベースのパッケージ管理システムを採用しているLinuxディストリビューション用のパッケージマネージャであるYum 3.4のフォークであり、Yumの事実上の後継バージョンです。（Wikipediaより）
Dandified = いきにめかしこんだ、しゃれこんだ
という意味になります。
</blockquote>

 

wekanのソースコードを取得します。 
```sh
# cd /opt
# git clone https://github.com/wekan/wekan.git
# cd wekan
```

 

# Wekan依存関係インストール

rebuild-wekan.sh では、 
`sudo apt-get install -y build-essential gcc g++ make git curl wget npm p7zip-full` 
となっていますので、それに相当することをやっていきます。 
 
開発ツールをまとめてインストールします。 
```sh
# yum -y groupinstall "Development Tools"
```
<blockquote class="info">
UbuntuやDebianのbuild-essential に相当するようです。
autoconf, automake, gcc-c++ ... 等々、開発用のツールが大量にインストールされます。
※今回は最初にdnfでインストールしましたが、ここでgitも入るようです。
</blockquote>

<blockquote class="info">
p7zip-fullに関して、rebuild-wekan.shでは、
<pre><code>#curl https://releases.wekan.team/fibers-multi.7z -o fibers-multi.7z
#7z x fibers-multi.7z
#rm fibers-multi.7z</code></pre>
とコメントアウトされていますので、インストールしませんでした。
</blockquote>

 

npmをインストールします。 
```sh
# dnf -y install npm
```
<blockquote class="info">
npmは、Node.jsのパッケージ管理システムです。
</blockquote>

 

nodeをインストールします。 
```sh
# npm -g install n
# n 12.22.1
```
<blockquote class="info">
nは、Node.js(node)のバージョンを管理するツールです。
今回、12.22.1 を指定しています。（rebuild-wekan.shがそうなっているため。）
</blockquote>

 

npmを最新版に更新して、node-gypをインストールします。 
```sh
# npm -g install npm
# npm -g install node-gyp
```
<blockquote class="info">
node-gyp(gyp=Generate Your Projects)は、Node.jsのネイティブアドオンモジュールをコンパイルするために、Node.jsで書かれたクロスプラットフォームのコマンドラインツールです。
ネイティブアドオンモジュールとは、Node.js本体を拡張するプログラム(C/C++)となります。
</blockquote>

 

fibersをインストールします。
```sh
# mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp
# npm -g install fibers
```
<blockquote class="info">
fibersというのは、Node.jsの非同期処理用のライブラリです。今回は、これがNode.jsのネイティブアドオンモジュールにあたるようです。
</blockquote>

 

Meteorをインストールします。
```sh
# curl https://install.meteor.com | bash
```
<blockquote class="info">
https://install.meteor.comの内容は、シェルスクリプトで、ダイレクトに実行しているのですが、ファイル（meteor-bootstrap-${PLATFORM}.tar.gz）をダウンロードするところが有り、タイミングによるかもしれませんが、ここで、かなり時間がかかりました。（１時間くらい）
</blockquote>

 

# Wekanのビルド

meteor buildコマンドでWekanをビルドします。
```sh
# rm -rf node_modules .meteor/local .build
# chmod u+w *.json
# npm install
# meteor build .build --directory --allow-superuser
```
<blockquote class="info">
rootユーザーの場合、
--allow-superuser
を付けないとエラーになりますので、付けて実行します。
</blockquote>

<blockquote class="alert">
meteor buildは、かなりメモリを消費するようです。メモリ1GBで行ったときは、処理が遅延し、２時間以上かかりました。メモリ4GB程度にすることをお勧めします。
</blockquote>

 

ゴミ掃除します。
```sh
# rm -rf .build/bundle/programs/web.browser.legacy
# cd .build/bundle/programs/server
# rm -rf node_modules
# chmod u+w *.json
# npm install
# cd ../../../..
# cd .build/bundle
# find . -type d -name '*-garbage*' | xargs rm -rf
# find . -name '*phantom*' | xargs rm -rf
# find . -name '.*.swp' | xargs rm -f
# find . -name '*.swp' | xargs rm -f
```
 

ここまでで、rebuild-wekan.sh の内容は終了です。 

 

起動してみます。
```sh
# cd /opt/wekan
# ./start-wekan.sh
/opt/wekan/.build/bundle/programs/server/node_modules/fibers/future.js:313
 throw(ex);
 ^
```

 

エラーになりました。それもそのはず、mongodbをインストールしていませんでした。

 

# mongodbインストール
 
mongodbのyumリポジトリ情報を追加します。
```sh
# vi /etc/yum.repos.d/mongodb-org.repo
```

```sh
[mongodb-org-4.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc
```

 

mongodb(クライアント、サーバー)4.4をインストールします。
```sh
# yum install -y mongodb-org
# mongo -version
MongoDB shell version v4.4.5
```

 

mongodbを起動します。
```sh
# systemctl enable mongod
# systemctl start mongod
```

 

もう一度、start-wekan.shでWekanを起動してみます。
```sh
# ./start-wekan.sh
Presence started serverId=a58yzr6zJwvtv3XDg
```
起動しました！ 
 
CTRL + C で停止して、systemdに登録します。 

 

# wekan起動設定
 
wekan起動時の環境変数を記述します。
```sh
# vi /opt/wekan/.build/bundle/.env
```
```sh
MONGO_URL='mongodb://127.0.0.1:27017/wekan'
ROOT_URL='http://wekan.itccorporation.jp'
MAIL_URL='smtp://user:pass@mailserver.example.com:587'
MAIL_FROM='wekan@itccorporation.jp'
PORT=3001
```

 

systemdに登録します。
```sh
# vi /etc/systemd/system/wekan.service
```
```sh
MONGO_URL='mongodb://127.0.0.1:27017/wekan'
[Unit]
Description=Wekan Server
After=syslog.target
After=network.target

[Service]
Type=simple
Restart=on-failure
StartLimitInterval=86400
StartLimitBurst=5
RestartSec=10
ExecStart=/usr/local/bin/node /opt/wekan/.build/bundle/main.js
EnvironmentFile=/opt/wekan/.build/bundle/.env
ExecReload=/bin/kill -USR1 $MAINPID
RestartSec=10
WorkingDirectory=/opt/wekan
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=Wekan

[Install]
WantedBy=multi-user.target
```
<blockquote class="info">
root権限起動のため、
<pre><code>User=wekan
Group=wekan</pre></code>
のような記述は省略しています。
インターネットへの疎通が無い社内の閉じたLAN限定で運用するため、root起動ですが、通常は、ユーザー権限でセットアップ、起動した方が良いと思います。
</blockquote>

 

```sh
# systemctl daemon-reload
# systemctl start wekan
# systemctl enable wekan
```

 

# ブラウザアクセス
 
ファイアウォール有りで、外から見る場合、3001ポートを開ける必要があります。

```sh
# firewall-cmd --zone=public --add-port=3001/tcp --permanent
# firewall-cmd --reload
```

 

http://wekan.itccorporation.jp:3001 へブラウザでアクセス 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/wekan_install/image01.png) 

 

できました！

Wekan Open-Source kanban をソースコードを使ってインストールしてみました。 Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) 別記事「CentOS8にwekanをインストール(snap編)」では、snapを使い、インストールしましたが、今回は、snapを使わず、dockerでもなく、ソースからインストールしていきます。 github.com/wekan から rebuild-wekan.sh というのを見つけて、この内容を行えばできそうと思い、やってみました。 基本的に rebuild-wekan.sh の内容通りでしたが、今回の環境の場合、CentOSのため、rebuild-wekan.sh の序盤 apt-get でいきなりコケますので、dnf, yumで代替して進めています。

CentOS8にwekanをインストール(ソースからビルド編)

# はじめに
Rocket.Chatとは、オープンソースのビジネスチャットシステムです。 
Node.js(JavaScript)とMeteorフレームワークで作られています。 
MIT Licenseで、GitHubにソースコードが公開されています。 
 
SaaS(クラウド)にも対応しています。 
そちらは、現時点で2 USD～です。 
オンプレミス（自前サーバーで運用）の場合、MIT Licenseですので、無料です。 
ということで、さっそく、自前のCentOSサーバーにインストールしてみようと思います。 
ソースコードを触る可能性がゼロではないため、Dockerを使わず、ビルドチャレンジになります。
 
インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり)

 

# インストール準備

<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

 

アップデート可能なパッケージを調査します。
```sh
# yum -y check-update
```

 

たくさん表示されたので、yum updateを行いました。 

```sh
# yum update
```

 

mongodbのyumリポジトリ情報を追加します。

```sh
# vi /etc/yum.repos.d/mongodb-org.repo
```

```sh
[mongodb-org-4.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.2.asc
```

 

# node, mongodb インストール
 
curlをインストールして、そのままNode.jsのリポジトリをインストールします。
```sh
# yum install -y curl && curl -sL https://rpm.nodesource.com/setup_12.x | bash -
```

<blockquote class="info">
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
の意味ですが、
まず、
curl -sL https://rpm.nodesource.com/setup_12.x から得られるのは、シェルスクリプトの内容です。
これがパイプを介して、 - に渡り、- (標準出力内容)がシェルスクリプトファイルのような役割になり、
bash [シェルスクリプト]
と実行しています。
# curl -sL https://rpm.nodesource.com/setup_12.x > hoge.sh
# bash hoge.sh
と同じ意味です。
 
curlのオプションの意味は、以下です。
-L ： レスポンスにリダイレクトの指示があったらリダイレクトする。
-s ： エラーやプログレス表示をしない（取りに行った情報以外何も表示しない。）
</blockquote>

<blockquote class="info">
https://rpm.nodesource.com/setup_12.x
から得られるシェルスクリプトは、けっこう長いです。
#!/bin/bash
 
# Discussion, issues and change requests at:
# https://github.com/nodesource/distributions
#
# Script to install the NodeSource Node.js 12.x repo onto an
# Enterprise Linux or Fedora Core based system.
#
# Run as root or insert `sudo -E` before `bash`:
#
（略）
</blockquote>

 

gcc-c++、make、mongodb(クライアント、サーバー)、node、npm をインストールします。
```sh
# yum install -y gcc-c++ make mongodb-org nodejs
```

 

yarnをインストールします。※特に必須ではありませんが、一応。
```sh
# curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
# yum install -y yarn
```
<blockquote class="info">
yarnはnpmの互換ツールです。yarn,npmの説明はここでは割愛します。
</blockquote>

 

# バージョン確認
 
バージョンを確認します。
```sh
# mongo -version
MongoDB shell version v4.2.13

# node -v
v12.22.1

# npm -v
6.14.12

# npm update -g
# npm -v
6.14.13

# yarn -v
1.22.5
```

 

# Rocket.Chat インストール
 
サードパーティ製のリポジトリepel-releaseと画像処理ライブラリGraphicsMagickをインストールします。
```sh
# yum install -y epel-release
# yum install -y GraphicsMagick
```

 

Rocket.Chatをインストールします。 
```sh
# curl -L https://releases.rocket.chat/latest/download -o /tmp/rocket.chat.tgz
# tar -xzf /tmp/rocket.chat.tgz -C /tmp
# cd /tmp/bundle/programs/server && npm install
# mv /tmp/bundle /opt/Rocket.Chat
# useradd -M rocketchat && usermod -L rocketchat
# chown -R rocketchat:rocketchat /opt/Rocket.Chat
```

<blockquote class="info">
useraddコマンド：
-M：--no-create-homeの省略形。ユーザーのホームディレクトリを作成しない。
-L：ユーザーをロックし、使用できなくする。
</blockquote>

 

# mongodb, Rocket.Chat 起動

```sh
# vi /lib/systemd/system/rocketchat.service
```

```sh
[Unit]
Description=The Rocket.Chat server
After=network.target remote-fs.target nss-lookup.target nginx.service mongod.service
[Service]
ExecStart=/usr/local/bin/node /opt/Rocket.Chat/main.js
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=rocketchat
User=rocketchat
Environment=MONGO_URL=mongodb://localhost:27017/rocketchat?replicaSet=rs01 MONGO_OPLOG_URL=mongodb://localhost:27017/local?replicaSet=rs01 ROOT_URL=http://localhost:3000/ PORT=3000
[Install]
WantedBy=multi-user.target
```

 

nodeコマンドの位置を確認します。
```sh
# which node
/usr/bin/node
```


node [main.jsファイル]で起動するのですが、nodeの位置が違うため、修正します。 
また、今回は、ブラウザから http://chat.itccorporation.jp:3000 でアクセスしたいため、ROOT_URLを修正します。
```sh
# vi /usr/lib/systemd/system/rocketchat.service
```
ExecStart=/usr/local/bin/node /opt/Rocket.Chat/main.js 
↓ 
ExecStart=/usr/bin/node /opt/Rocket.Chat/main.js 
 
ROOT_URL=http://localhost:3000 
↓ 
ROOT_URL=http://chat.itccorporation.jp:3000 

 

```sh
# sed -i "s/^#replication:/replication:\n replSetName: rs01/" /etc/mongod.conf
```
<blockquote class="info">
MongoDB の レプリカセット（レプリケーション）を設定しています。ただし、プライマリ１台です。何でこれを行っているかと言いますと、Rocket.Chatの公式サイトには、以下の説明があります。
 
「Rocket.Chat uses the MongoDB replica set to improve performance via Meteor Oplog tailing.」
⇒Meteor Oplog tailingにより、パフォーマンスを向上させるため。
 
以上。
 
で先に進もうかと思いましたが、一つずつ、紐解いてみました。
 
Oplog = オペレーションログ（プライマリで起きたことをセカンダリに伝える情報）PostgreSQLのWALみたいなものです。（あくまでイメージ）
 
Meteor = フレームワークですが、ここでは、Oplogを監視する仕組み
 
tailing = tail -f access_log のようにずっと見ていること
 
データの差分を把握するよりもOplogをリアルタイム監視した方がレスポンスが速いからこの設定が必要というわけですね。
</blockquote>

 

<blockquote class="warn">
公式サイトのCentOS7の手順によりますと、
# sed -i "s/^# engine:/ engine: mmapv1/" /etc/mongod.conf
の手順で、ストレージエンジンをmmapv1にする手順がありますが、これは不要でした。
MMAPv1 ストレージエンジンは、メモリとディスクを駆使して、データの読み書きを担当するプログラムです。MongoDB 4.2から廃止されて、WiredTigerストレージエンジンになりました。WiredTiger(標準設定)の方が優れているようです。
</blockquote>

 

```sh
# systemctl enable mongod
# systemctl start mongod
# mongo --eval "printjson(rs.initiate())"
MongoDB shell version v4.2.13
connecting to: mongodb://127.0.0.1:27017/?gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("dc0e6888-0f2f-4135-93c4-29d257deac42") }
MongoDB server version: 4.2.13
{
 "info2" : "no configuration specified. Using a default configuration for the set",
 "me" : "127.0.0.1:27017",
 "ok" : 1
}
```
"ok" : 1 となっていれば、問題無しです。

 

```sh
# systemctl enable rocketchat
# systemctl start rocketchat
```

 

# ブラウザアクセス

地味にハマりますが、ファイアウォール有りで、外から見る場合、3000ポートを開ける必要があります。
```sh
# firewall-cmd --zone=public --add-port=3000/tcp --permanent
# firewall-cmd --reload
```

 

http://chat.itccorporation.jp:3000 へブラウザでアクセス

 

最初は、管理者アカウントの登録画面になります。 
 
![""](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/RocketChat/image01.png) 

 

できました！

Rocket.Chatとは、オープンソースのビジネスチャットシステムです。 Node.js(JavaScript)とMeteorフレームワークで作られています。 MIT Licenseで、GitHubにソースコードが公開されています。 SaaS(クラウド)にも対応しています。 そちらは、現時点で2 USD～です。 オンプレミス（自前サーバーで運用）の場合、MIT Licenseですので、無料です。 ということで、さっそく、自前のCentOSサーバーにインストールしてみようと思います。 ソースコードを触る可能性がゼロではないため、Dockerを使わず、ビルドチャレンジになります。 インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり)