nodeのexpressをtsで作って無料でazureに公開したメモ

## 概要
[Azure で Node.js Web アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-nodejs?pivots=platform-linux)を試してみたメモ。
ついでにTypescriptでトランスパイルするところまで。

## nodeアプリの作成
* expressで文字列を返すだけのアプリを作成する
* `npm run start`で開始して、http://localhost:3000/api/hello で文字列がかえることを確認。
 


[ソース](https://github.com/hibohiboo/develop/tree/3e90c0699457b8c34a62e1e926f215a771b02c85/tutorial/lesson/azure/node-app)


## Azureに公開

## VS Code 拡張機能をインストール
以下の拡張をインストール。
サブスクリプションとの紐づけを行っておく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4c556338-0a31-1a30-c6a7-07ddaa983bf5.png)

## azureに公開
無料プランで作成する。

### VSCodeからデプロイ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/9510ba86-7eea-a85c-8f56-33c91ee954f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/42a494a8-f6a5-5bf7-61bf-8c1a826dbd47.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4719cefe-3c07-f4e4-2a4f-7a72d76b01c0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4f9d192c-4af6-bf63-3c35-f458437eef8d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/ac73876d-9081-b21b-9e12-e49f1790b68b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/10b43972-bf6f-065e-5da6-9f56c2677192.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/68310c30-af17-43a5-79ce-75023050eac2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/9d0465d1-9ae0-ec45-6af8-067cd10bbf28.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/b0352d02-8c50-bf17-ee09-8433f3153cf3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7c76604f-8a75-12d7-1419-d99cecf26f39.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/8d3c59cd-c3ce-9395-1b48-9eef828a5856.png)

### 公開後の確認

https://az-node-app.azurewebsites.net/api/hello

[ソース](https://github.com/hibohiboo/develop/tree/cd285d0bce2adbc710612b73760be370d99fdc3d/tutorial/lesson/azure/node-app)



## typescriptの導入
ミニマムに入れてみる。

```diff:package.json
{
  "name": "node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./bin/www",
+    "build": "tsc",
+    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "uuid": "^8.3.1"
  },
  "devDependencies": {
+    "@types/express": "^4.17.9",
+    "typescript": "^4.1.2"
  }
}
```

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "lib": ["es2020"], 
    "outDir": "./dist",
    "skipLibCheck": true,  
    "forceConsistentCasingInFileNames": true
  },
  "include": [
      "src/**/*"
  ],
}
```


```ts:src/app.ts
import express from 'express'
var app = express();

app.get('/api/hello', (req, res) => {
  return res.json('hello world!!')
})

export default app
```

```diff:bin/www
- var app = require('../app');
+ var app = require('../dist/app').default;
var http = require('http');

```

[ソース](https://github.com/hibohiboo/develop/tree/2782c859ce9996bee4adcdb158e079203b63ed89/tutorial/lesson/azure/node-app)

## 手元でビルドしたものをデプロイするように修正

デプロイするだけのわりに時間がかかるなと思っていたら、buildスクリプトは自動で走るらしい。(参照：[node.jsアプリの構成][*1])
今回はミニマムで行きたいので、とりあえずその設定をオフにした。オフにしたといってもbuildスクリプトの名前変えただけ。
ついでに余分なディレクトリはデプロイされないようにした。
`npm install --production`がされるようにしたいけれど、それをするにはまた別の手順が必要そう。今回はパス。

```diff:package.json
  "scripts": {
    "start": "node ./bin/www",
-    "build:" "tsc",
+    "tsc": "tsc",
    "watch": "tsc --watch"
  },
```


```json:.vscode/settings.json
{
  "appService.zipIgnorePattern": [
    "node_modules{,/**}",
    ".vscode{,/**}",
    "src{,/**}"
  ]
}
```

## lintの設定

typescriptを入れるならついでに入れたくなるのがlinter。

```diff:package.json
  "devDependencies": {
    "@types/express": "^4.17.9",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/parser": "^4.8.2",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "prettier": "^2.2.0",
    "typescript": "^4.1.2"
  }
```

```json:.vscode/extensions.json
{
  "recommendations": [
    "ms-azuretools.vscode-azureappservice",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig"
  ]
}
```

```json:.vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabCompletion": "on",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "typescript.format.enable": false,
  "javascript.format.enable": false,
}
```

```js:.eslintrc.js
module.exports = {
  ignorePatterns: ['!.eslintrc.js'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'commma-dangle': 'off',
  },
}
```

```js:.prettierrc.js
module.exports = {
  semi: false,
  arrowParens: 'always',
  singleQuote: true,
  trailingComma: 'all',
}
```

```:.editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
```


## 参考

[Node.js 10,12,14のためのTypeScriptコンパイラ設定(targetとlib)](https://qiita.com/suin/items/32f76c9b88b8daa286c4)
[Node+TypeScript+ExpressでAPIサーバ構築](https://qiita.com/pochopocho13/items/79a4735031ce11a91df7)
[github](https://github.com/hibohiboo/develop/issues/30)
[node.jsアプリの構成][*1]

[*1]:https://docs.microsoft.com/ja-jp/azure/app-service/configure-language-nodejs?pivots=platform-linux