node의 express를 ts로 만들어 무료로 azure에 공개한 메모

개요

Azure에서 Node.js 웹 앱 만들기 시도한 메모.
드디어 Typescript로 변환하는 곳까지.

노드 앱 만들기

express에서 문자열을 반환하기위한 앱 만들기

npm run start 로 시작하고 http://localhost:3000/api/hello 에서 문자열이 바뀌는지 확인합니다.

출처

Azure에 게시

VS Code 확장 프로그램 설치

다음 확장을 설치.
구독과의 연결을 실시해 둔다.

azure에 게시

무료 플랜으로 작성한다.

VSCode에서 배포

게시 후 확인

출처

typescript 소개

미니맘에 넣어 본다.

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"
  }
}

tsconfig.json

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

src/app.ts

import express from 'express'
var app = express();

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

export default app

bin/www

- var app = require('../app');
+ var app = require('../dist/app').default;
var http = require('http');

출처

수중에서 빌드한 것을 배포하도록 수정

배포하는 것만 큼 시간이 걸리지 않는다고 생각하면 build 스크립트는 자동으로 달리는 것 같다. (참조: node.js 앱 구성 )
이번에는 최소한으로 가고 싶기 때문에, 우선 그 설정을 OFF했다. 해제했다고 해도 build 스크립트의 이름 바꾸었을 뿐.
그런 다음 여분의 디렉토리는 배포되지 않습니다.npm install --production 가 되도록 하고 싶지만, 그것을 하기 위해서는 또 다른 순서가 필요할 것 같다. 이번에는 패스.

package.json

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

.vscode/settings.json

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

lint 설정

typescript를 넣으면 김에 넣고 싶어지는 것이 linter.

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"
  }

.vscode/extensions.json

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

.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,
}

.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',
  },
}

.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)
Node+TypeScript+Express로 API 서버 구축
github
node.js 앱 구성