git clone https://github.com/lukeocodes/express-nodemon-ngrok-starter.git

npm install

npm start

npm run dev

npm init -y

이제 Express를 설치합니다.

npm install express

이 코드를 app.js 파일에 추가하십시오.

// app.js
const express = require('express')
const app = express()
const port = process.env.PORT || 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

시작하고 localhost:3000에서 확인하십시오.

node app.js

또는 원하는 경우 package.json 에 스크립트를 추가합니다.

    "scripts": {
+     "start": "node app.js"
    },

다음과 같이 실행하려면:

npm start

그리고 끝났습니다! (그냥 농담).

응록

이제 Hello World를 THE world와 공유할 수 있도록 Ngrok을 시작하려고 합니다.

npm install ngrok -g
ngrok http 3000

시작하고 https://your-ngrok-hash.ngrok.io에서 확인하십시오.

대박! (이게 아니야, 끝까지 나랑 같이 있어줘).

노드몬

이제 React.js 또는 Vue.js 프로젝트에서 작업하고 Webpack 없이 일반 Node.js 프로젝트로 돌아간 적이 있다면 변경 사항이 있을 때마다 앱을 자동으로 재부팅할 수 있기를 원했을 것입니다.

이를 위해 아마도 Nodemon을 우연히 발견했을 것입니다. devDependency로 설치하십시오.

npm install nodemon --save-dev

package.json 파일을 빠르게 업데이트하면 Nodemon으로 앱을 실행할 수 있습니다.

    "scripts": {
+     "dev": "nodemon app.js",
      "start": "node app.js"
    },

이제 다음과 같이 Nodemon으로 실행할 수 있습니다.

npm run dev

하지만, 만약에?

하지만 이 모든 것을 앱 자체에 넣을 수 있다면 어떨까요? 그래, 당신은 그것을 올바르게 읽었습니다! :exploding_head_emoji:

먼저 devApp.js 파일을 만듭니다.

해당 파일 안에 this example code from Nodemon 을 추가하여 모듈로 실행합니다.

// devApp.js
const nodemon = require('nodemon')

nodemon({
  script: 'app.js',
  ext: 'js'
})

nodemon.on('start', async () => {
  console.log('app.js just started')
}).on('quit', async () => {
  console.log('killing app.js')
})

다음으로 Ngrok를 devDependency로 설치합니다.

npm install ngrok --save-dev

이제 devApp.js 파일을 수정하고 이 코드를 추가합니다.

  // devApp.js
  const nodemon = require('nodemon')
+ const ngrok = require('ngrok')
+ const port = process.env.PORT || 3000

  nodemon({
    script: 'app.js',
    ext: 'js'
  })

+ let url = null

  nodemon.on('start', async () => {
-   console.log('app.js just started')
+   if (!url) {
+     url = await ngrok.connect({ port: port })
+     console.log(`Server now available at ${url}`)
+   }
  }).on('quit', async () => {
-   console.log('killing app.js')
+   await ngrok.kill()
  })

마지막으로 package.json를 약간 변경하십시오!

    "scripts": {
-     "dev": "nodemon app.js",
+     "dev": "node devApp.js",
      "start": "node app.js"
    },

이제 서버를 시작하면 로컬 URL과 공용 URL이 이제 콘솔에 출력되고 코드를 업데이트하면 노드 앱이 새로 고쳐집니다(그러나 ngrok URL은 유지됩니다!).