<h1 id="h8d027c8ed3">はじめに</h1>DockerコンテナにpostfixのSMTPサーバーを実装します。 めんどくさいことは端折った超簡単な設定です。 リレー周りで少し詰まったので共有させていただきます。 <h1 id="h1eb43247fe">フォルダ構成</h1>メール送信用のアプリケーションもcomposeで立てることを想定しています。 今回、検証用にnodejsでメールを送信するので、composeでコンテナを立てます。<pre><code>project/
　├ app/
 │ ├ node_modules
 │ ├ package.json
 │　└ index.js 
　├ mail/
 │ ├ config/
 │ ｜　└ main.cf
 │　└ log/
 │　　 └ mail.log
　├ docker/
　│　└ postfix/
　│　　　└ Dockerfile
　│　└ app/
　│　　　└ Dockerfile
 ├ .env
　└ docker-compose.yml</code></pre> <h1 id="hf564c124b1">dockerの設定</h1>今回メールサーバーで使用するイメージは「<a style="background-color:#ffffff" href="https://hub.docker.com/r/catatnight/postfix/" target="_blank" rel="noopener noreferrer">catatnight/postfix</a>」です。 nodejsアプリケーションからのメール送信はホスト経由での送信になるので、 「networks」でIPを固定してあげます。 今回の設定だとコンテナ目線のホストマシンのIPは「172.21.0.1」で統一されます。 また、commandでコンテナ起動時にメールを送信します。 docker-compose.yml<pre><code>version: '3.8'
services:
&nbsp; postfix:
&nbsp; &nbsp; build:
&nbsp; &nbsp; &nbsp; context: .
&nbsp; &nbsp; &nbsp; dockerfile: ./docker/postfix/Dockerfile
&nbsp; &nbsp; hostname: postfix
&nbsp; &nbsp; container_name: postfix
&nbsp; &nbsp; ports:
&nbsp; &nbsp; &nbsp; - "${SMTP_PORT}:25"
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - maildata:/var/mail
&nbsp; &nbsp; &nbsp; - mailstate:/var/mail-state
&nbsp; &nbsp; &nbsp; - ./mail/config/main.cf:/etc/postfix/main.cf
&nbsp; &nbsp; &nbsp; - ./mail/log/mail.log:/var/log/mail.log
&nbsp; &nbsp; environment:
&nbsp; &nbsp; &nbsp; - maildomain=mail.example.com
&nbsp; &nbsp; &nbsp; - smtp_user=${SMTP_USER}:${SMTP_PASS}
&nbsp; &nbsp; networks:
&nbsp; &nbsp; &nbsp; fixed_compose_network:
&nbsp; &nbsp; restart: always
&nbsp; node_app: 
&nbsp; &nbsp; build: 
&nbsp; &nbsp; &nbsp; context: .
&nbsp; &nbsp; &nbsp; dockerfile: ./docker/app/Dockerfile
&nbsp; &nbsp; hostname: app
&nbsp; &nbsp; depends_on:
&nbsp; &nbsp; &nbsp; - postfix
&nbsp; &nbsp; container_name: node_app
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - ./app:/usr/app
&nbsp; &nbsp; &nbsp; - node_modules:/usr/app/node_modules
&nbsp; &nbsp; networks:
&nbsp; &nbsp; &nbsp; fixed_compose_network:
&nbsp; &nbsp; environment:
&nbsp; &nbsp; &nbsp; - SMTP_USER=${SMTP_USER}
&nbsp; &nbsp; &nbsp; - SMTP_PASS=${SMTP_PASS}
&nbsp; &nbsp; &nbsp; - SMTP_HOST=${SMTP_HOST}
&nbsp; &nbsp; &nbsp; - SMTP_PORT=${SMTP_PORT}
&nbsp; &nbsp; command: sh -c 'npm install &amp;&amp; node /usr/app/index.js'
volumes:
&nbsp; node_modules:
&nbsp; maildata:
&nbsp; mailstate:
networks:
&nbsp; fixed_compose_network:
&nbsp; &nbsp; ipam:
&nbsp; &nbsp; &nbsp; driver: default
&nbsp; &nbsp; &nbsp; config:
&nbsp; &nbsp; &nbsp; &nbsp; - subnet: 172.21.0.0/24</code></pre>.env<pre><code>SMTP_USER=user
SMTP_PASS=password
SMTP_HOST=172.21.0.1
SMTP_PORT=1025</code></pre>app/Dockerfile<pre><code>FROM node:alpine
WORKDIR /usr/app</code></pre>postfix/Dockerfile<pre><code>FROM &nbsp;catatnight/postfix</code></pre> <h1 id="h60988a12e7">メールサーバーの設定</h1>main.cfを編集することでメールサーバーの設定が可能です。 基本的にはデフォルトの設定のままですが、 今回は「172.21.0.1」からのメールのリレーを許可する必要があります。 (私はこのリレーの設定でハマりました。) リレーを許可するには、mynetworksにIPを追記します。<pre><code>mynetworks =172.21.0.1</code></pre> 以下が僕の設定したmain.cfです(特にデフォルトから触っていません)。 main.cf<pre><code>
smtpd_banner = $myhostname ESMTP $mail_name (Ubuntu)
biff = no


# appending .domain is the MUA's job.
append_dot_mydomain = no


# Uncomment the next line to generate "delayed mail" warnings
#delay_warning_time = 4h


readme_directory = no


# TLS parameters
smtpd_tls_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
smtpd_tls_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
smtpd_use_tls=no
smtpd_tls_session_cache_database = btree:${data_directory}/smtpd_scache
smtp_tls_session_cache_database = btree:${data_directory}/smtp_scache


# See /usr/share/doc/postfix/TLS_README.gz in the postfix-doc package for
# information on enabling SSL in the smtp client.


smtpd_relay_restrictions = permit_mynetworks
myhostname = mail.example.com
alias_maps = hash:/etc/aliases
alias_database = hash:/etc/aliases
mydestination = dd40882ba0ea, localhost.localdomain, , localhost
relayhost =&nbsp;
#↓ここにIPを追記
mynetworks = 127.0.0.0/8 [::ffff:127.0.0.0]/104 [::1]/128, 172.21.0.0/24
mailbox_size_limit = 0
recipient_delimiter = +
inet_interfaces = all
smtpd_sasl_auth_enable = yes
broken_sasl_auth_clients = yes
smtpd_recipient_restrictions = permit_mynetworks,permit_sasl_authenticated,reject_unauth_destination</code></pre> <h1 id="hdf1955805a">メール送信用スクリプト</h1>nodejsでのメールの送信は「nodemailer」を使用します。 optionsを指定して送信します。<pre><code>const nodemailer = require('nodemailer');

// SMTP の設定
const options = {
&nbsp; host: &nbsp;process.env.SMTP_HOST, // メールサーバー
&nbsp; port: &nbsp;process.env.SMTP_PORT, // ポート番号 
};
// メールメッセージ
const mail = {
&nbsp; from: {from}, // 送信元メールアドレス
&nbsp; to: {to}, // 送信先メールアドレス
&nbsp; subject: 'Testメール',
&nbsp; text: `送信成功`,
};

// メールの送信
(async () =&gt; {
&nbsp; try {
&nbsp; &nbsp; const transport = nodemailer.createTransport(options);
&nbsp; &nbsp; const result = await transport.sendMail(mail);
&nbsp; &nbsp; console.log('+++ Sent +++');
&nbsp; &nbsp; console.log(result);
&nbsp; } catch (err) {
&nbsp; &nbsp; console.log('--- Error ---');
&nbsp; &nbsp; console.log(err);
&nbsp; }
})();</code></pre> <h1 id="h59b93dba3f">Dockerで実行</h1>コンテナを立ち上げるとメールが送信されます。 また、送信がうまくいかない場合は、mail/log/mail.logを確認してみてください。 <pre><code>docker-compose up -d</code></pre>

DockerでSMTPサーバーを立ち上げ、nodeJsでメールを送信するシンプルな構築をするチュートリアルです。


Dockerで簡単にメールサーバーを実装

<h1 id="h8d027c8ed3">はじめに</h1>reactのチュートリアルから誰もがお世話になるcreate-react-app。 reactのアプリケーションをコマンド一発で楽々に作ることができますよね。 便利だし、早いし、typescriptの環境構築も楽勝です。 めちゃくちゃ便利なだけあってreact初心者は、 自動でインストールされているwebpack等の関連ライブラリを意識できません。 create-react-appを使用して開発を始めると、「package.json？？なんやそれ、、怖いから触らないでおこう」的な軽いノリで、 モダンJSにおいて大事な部分を見て見ぬふりをしながら、reactを触り始めることができてしまいます。 今回は、create-react-appを使わずにreact環境構築をして、 いろいろすっ飛ばしてきた部分を理解しつつ、create-react-appと遜色ない環境を作っていきます。 <h1 id="h31d727ccda">準備</h1>npmで各種パッケージをインストールし、環境構築していきます。 ※Node.Js、npmをインストールできていない方は下記を参考にしてください。 <a href="https://qiita.com/mk185/items/7ad004bf202f400daea1" target="_blank" rel="noopener noreferrer">Node.js、npmのインストール方法|Qiita</a> <h2 id="h64340b7f1f">プロジェクトフォルダを作成</h2>プロジェクト名は「react-forum」とします。<pre><code>#「react-forum」フォルダの作成
$ mkdir react-forum 
#react-forumフォルダ直下に移動
$ cd react-forum</code></pre> <h2 id="h8325fac47a">package.jsonを生成</h2>package.jsonの中にはインストールしたパッケージがJson形式で記録されています。 実行すると、コマンドラインでいろいろ聞かれると思いますが全部エンターを押して飛ばしてもらって問題ないです。<pre><code>#package.jsonを作成
$ npm init</code></pre>ここまではお約束といった感じですね。 <h2 id="h693109469e">Webpackをインストールする</h2>webpackの主な役割を簡単に説明すると、 複数のJavascriptやcss等のモジュールを一つのjsファイルにまとめてくれるライブラリです。 Webpackについては、下記で詳しく説明しておりますので、もっと知りたい方は下記を参考にしてください。 Webpackのパッケージを二つインストールします。<ul><li>webpack …Webpackの本体</li><li>webpack-cli …インストールしたWebpackをコマンドラインから実行できるツール</li></ul> <pre><code> $ npm install webpack webpack-cli</code></pre>　ここで package.jsonの中身を確認してみましょう。 <code>package.json</code><pre><code>{
&nbsp; "name": "react-forum",
&nbsp; "version": "1.0.0",
&nbsp; "description": "",
&nbsp; "main": "index.js",
&nbsp; "scripts": {
&nbsp; &nbsp; "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
&nbsp; },
&nbsp; "author": "",
&nbsp; "license": "ISC",
 //この中にインストールしたパッケージ名とバージョンが追加されていきます。
&nbsp; "devDependencies": {
&nbsp; &nbsp; "webpack": "^5.74.0",
&nbsp; &nbsp; "webpack-cli": "^4.10.0"
&nbsp; }
}</code></pre> devDependenciesにwebpack、webpack-cliが追記されていることが確認できれば問題ないです。 ちなみに、先ほどののインストールは「--save-dev」というオプションを付けましたが、これを付けた場合、 開発環境でのみ使うことができるパッケージとしてインストールされます。 「--save-dev」を付けなかった場合本番環境、開発環境両方で使えるパッケージとなり、 package.jsonのdependenciesに追加されます。 webpackはローカルでビルドする際にしか使用しないので、「--save-dev」オプションをつけてインストールします。 <h2 id="h3365c8559c">webpack.config.jsを作成</h2>「webpack.config.js」はwebpackの設定ができるJsファイルです。 入出力ファイルの設定はもちろんのこと、ビルド時のカスタマイズなど様々な設定ができます。 ルートディレクトリにwebpack.config.jsを作成します。<pre><code>$ mkdir webpack.config.js</code></pre> 今回は出力ファイルを「dist/static/main.js」としています。 各設定項目の説明はコメントに記載。 <code>webpack.config.js</code><pre><code>const path = require('path')
module.exports = {
 // 'development'に設定すると、バンドルファイルに「元のコード」と「変換後のコード」との
 // 対応関係が記述されたコメントが記述されます
 // 'production'に設定すると、コメントは記述されず、最適化されたコードで変換されます
 mode: 'development',

 // 最初に実行する変換前のファイル
　// 今回はsrcフォルダのindex.tsを指定
 entry: './src/index.ts',
　//バンドルファイルの出力設定
 //__dirnameでプロジェクトのルートパスを取得できます。
 output: {
 path: path.join(__dirname, '/dist/static'), 
 filename: 'main.js' //出力ファイル名
 },
　//importの際に省略する拡張子をextension:配列で指定
 resolve: {
 extensions: ['.ts', '.tsx', '.js'] 
 },
};</code></pre> <h2 id="h16db2c4abf">Typescriptの導入</h2>reactに限らず、webpack+typescriptの開発環境を作る上で必要な手順は下記のようになります。<ol><li>typescriptをjavascriptに変換(トランスパイル)するモジュールのインストール(typescript)</li><li>1の変換モジュールをwebpackで使えるようにするライブラリのインストール(ts-loader)</li><li>トランスパイルをどのように行うのかの設定</li><li>webpackでバンドルする際に、トランスパイルを実行するように設定</li></ol> まずは１，２のモジュールをインストールします。<pre><code>$ npm install --save-dev typescript ts-loader</code></pre> 次にトランスパイルをどのように行うかの設定を行います。 トランスパイルの設定を行います。<pre><code>$ mkdir tsconfig.json</code></pre> <code>tsconfig.json</code><pre><code>{
&nbsp; &nbsp; "compilerOptions": {
&nbsp; &nbsp; &nbsp; "target": "es5",//出力するjavascriptのバージョン
&nbsp; &nbsp; &nbsp; "jsx": "react",//jsxをReact.createElementに変換する設定。jsxのままにするような場合は"preserve"で指定
&nbsp; &nbsp; &nbsp; "strict": true,//trueにするとtypescriptのコンパイル時の型チェックがより厳格になる。
&nbsp; &nbsp; &nbsp; "esModuleInterop": true,//CommonJSとESモジュール間との相互運用を可能にするためのフラグです。積極的にtrueで大丈夫です。
 "removeComments": true,//出力ファイルのコメントを削除するかどうか
&nbsp; &nbsp; &nbsp; "skipLibCheck": true,//.d.tsファイルの型チェックをスキップする。
&nbsp; &nbsp; &nbsp; "forceConsistentCasingInFileNames": true//importするファイル名の大文字小文字を区別するかどうか。
&nbsp; &nbsp; }
}</code></pre> 最後に、4の手順です。 webpack.config.jsにmodule.rulesを追加し、「.ts」「.tsx」ファイルに対してts-loaderを使ってトランスパイルする設定します。 <code>webpack.config.js</code><pre><code>const path = require('path')
module.exports = {
 mode: 'development',
 entry: './src/index.ts',
 output: {
 path: path.join(__dirname, '/dist/static'), 
 filename: 'main.js' //出力ファイル名
 },
 //追加
 module: {
 rules: [
 {
 // 「.ts 」または「.tsx 」ファイルを変換するよ～
 test: /\.(ts|tsx)$/,
 // ts-loaderを使って変換するよ～
 use: 'ts-loader',
 },
 ],
 }
 resolve: {
 extensions: ['.ts', '.tsx', '.js'] 
 },
};</code></pre> <h2 id="hb56aa222ec">Reactをインストール</h2>Reactを使うためにはreact本体と、react-domの二種類のパッケージをインストールする必要があります。 react本体には、おなじみのreact機能が入っていて、 react-domはreactとDOMを橋渡しするような役割があります。 <pre><code>$ npm install react react-dom</code></pre> <h2 id="he838d27aab">Reactのtypesをインストール</h2>せっかくtypescriptを使っているのにreactのtypesがないことには意味がありません。<pre><code>$ npm install @types/react @types/react-dom</code></pre>@types/reactの中身に興味がある方はnode_modules/@types/react内の「index.d.js」、「global.d.js」のソースを見てみることもお勧めします。 <h1 id="hae07df4dac">Reactで動作確認</h1>ここまでで typescriptでreact開発 ↓ webpackでバンドル までの一連の流れを行う設定はできています。 あとは、reactの中身を書いて、webpackの出力ファイル(デフォルトで/dist/main.js) をhtmlで読み込んで表示していきます。 <h2 id="hf72561ba15">index.ts、app.tsxの作成</h2>webpack実行時のエントリポイントとなる「src/index.ts」と、親コンポーネントとなるApp.tsxを作成をします。 srcディレクトリを作成します。<pre><code>$ mkdir src</code></pre> srcディレクトリの中にファイルを二つ作成します。 (どうやらreactのv18以降はrender()は使えないみたいなので、createRoot()を使ってます。) <code>index.ts</code><pre><code>import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./app"

const ROOT_ID = "root"&nbsp;as const ;//次に作成するdist/index.htmlのルート要素のid

const rootElement = document.getElementById(ROOT_ID);

//rootElementは HTMLElement | null なので、nullの場合の処理を書かないと怒られます
if (!rootElement) throw new Error(`${ROOT_ID}の要素が見つかりません。`);

const root = createRoot(rootElement);
root.render(&lt;App/&gt;);</code></pre> <code>app.tsx</code><pre><code>import React from 'react'

function App() {
&nbsp; return (
&nbsp; &nbsp; &lt;h1&gt;Hello World!!&lt;/h1&gt;
&nbsp; )
}
export default App</code></pre> <h2 id="hfefa9e7a08">index.htmlを作成</h2>webpack実行時の出力ファイルはdist/static/main.jsなので、distフォルダを作成し、 dist直下にindex.htmlを作ってあげます。 reactをレンダリングする部分にはindex.jsでも指定した、id="root"を設定します。 バンドルファイル(static/main.js)はhtml読み込み後に実行しなければならないので、 defer属性を付与することを忘れないようにしてください。 <code>dist/index.html</code><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&nbsp; &nbsp; &lt;head&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset="UTF-8"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;script defer src="static/main.js"&gt;&lt;/script&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;掲示板&lt;/title&gt;
&nbsp; &nbsp; &lt;/head&gt;
&nbsp; &nbsp; &lt;body&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="root"&gt;&lt;/div&gt;
&nbsp; &nbsp; &lt;/body&gt;
&lt;/html&gt;</code></pre> <h2 id="h752a5347cd">webpackを実行</h2>ここまで出来たらあとはwebpackを実行すれば、src配下のファイルがdist/static/main.jsにバンドルされます！ 実行する際はnpm の場合パスが通っていないので、npxを使用します。 （npxで実行した場合には、node_modules/.bin配下から実行するファイルを選んで実行してくれます。）<pre><code>$ npx webpack</code></pre> npmで実行したい場合は、package.jsonファイルのscriptにビルドコマンドを追加し、実行します。 <code>package.json</code><pre><code>"scripts": {
&nbsp; &nbsp; "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
&nbsp; &nbsp; "build":"webpack"
&nbsp; },</code></pre> <pre><code>$ npm run build</code></pre> dist/static/main.jsが作成されていれば成功です。 <h2 id="hd8b55bdbee">index.htmlをブラウザで確認</h2>エクスプローラからdist/index.htmlを実行してみましょう。 <img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/0316efc60a1f498c956b8f120b774c6a/reacttutorial1.jpg" alt=""> 成功！！！ でも毎度毎度コマンドをたたいてブラウザを確認するのは不便ですよね。 ここからはローカルサーバーを使ってよりサクサクテストできる環境を作っていきます。 <h2 id="h783d76bdef">webpack-dev-serverをインストール</h2>webpack-dev-serverを使えば、保存時に変更の差分のみバンドルファイルに即時反映され、効率よく開発を行うことができます。 webpack-dev-serverをインストールします。 ※「webpack-devserver」という似て非なるパッケージもあるので、インストールする際は気を付けてください。<pre><code>$ npm install --save-dev webpack-dev-server</code></pre> 続いて、webpack-dev-serverの設定を行っていきます。 webpack.config.jsでdevserverオプションを設定することで、webpack-dev-serverの起動時の挙動や、サーバーの設定が可能です。 <code>webpack.config.js</code><pre><code>&nbsp; &nbsp; //webpack-dev-serverの設定
&nbsp; &nbsp; devServer: {
&nbsp; &nbsp; &nbsp; &nbsp; static: path.join(__dirname, '/dist'), //webpackの出力先を指定してあげてください
&nbsp; &nbsp; &nbsp; &nbsp; open: true, //ブラウザを自動的に起動します
&nbsp; &nbsp; &nbsp; &nbsp; port: 3000 //ポート番号を3000番に指定
&nbsp; &nbsp; },</code></pre> それではwebpack-dev-serverを起動してみましょう。<pre><code>$npx webpack-dev-server</code></pre>ブラウザが自動で起動し、http://localhost:3000で先ほどの画面が見れれば成功です。 <h2 id="he7d561ed84">webpack-dev-serverでホットリロードが効かない</h2>webpack-dev-serverを起動した状態で、src配下のファイルに何かしらの変更を加えて保存してみましょう。 変更がブラウザに反映されていないと思います。 僕はこれに引っ掛かって何時間もハマっていました。 何時間もの格闘の末、 「webpack-dev-serverはオンメモリでバンドル結果を保持していて、 そのバンドル結果はデフォルトで表示する静的ファイル直下のmain.jsからアクセスできるようになっている」 という事実が判明し、解決に至りました。 つまり、webpack-dev-serverのバンドル結果にアクセスするためのパスを変更してあげる必要があるということです。 この変更はwebpack.config.jsのoutput.publicPathから行います。 <code>webpack.config.js</code><pre><code>&nbsp;output: {
&nbsp; &nbsp; &nbsp; &nbsp; path: path.join(__dirname, '/dist/static'), 
&nbsp; &nbsp; &nbsp; &nbsp; publicPath: '/static/', //staticディレクトリ直下のmain.jsからバンドル結果にアクセスできるように変更
&nbsp; &nbsp; &nbsp; &nbsp; filename: 'main.js'
&nbsp; &nbsp; },</code></pre> これで、ホットリロードが正常に機能するはずです。 <h1 id="ha214098e44">まとめ</h1>今回は、create-react-appを使わずにtypescript+react開発の環境構築方法について解説いたしました。 webpack、typescript周りについて、まだまだ理解できていないことが多いなと反省するいいきっかけになりました。

create-react-appを使わずに、reactで掲示板を作る準備編。
webpackの解説多めでreact+typescriptの環境構築をするチュートリアルです。
より深くreactを理解したい方に向けたreact初心者向けの記事となっています。


カテゴリ：チュートリアル

Yakan

Yakan