빠르고 간단하게: 작동하는 node.js 백엔드로 풀스택 Vue.js 앱을 배포하는 방법

TL:DR: source code로 이동

제목에서 알 수 있듯이 먼저 주로 (Power)Shell을 사용하여 세 단계로 진행되는 작업을 설명합니다.

기본 노드 백엔드 설정.

Vue 클라이언트 설정.

Github에서 배포를 자동화하도록 npm 스크립트를 구성합니다.

Make sure to execute these commands as su, should you follow on a Linux machine.

1. 노드 부분

# Create a new working directory, change into it
$ mkdir node-vue-app && cd node-vue-app

# Initialize an npm project and a git repos
$ npm init -y && git init

# Create a client folder to hold the vue project, 
# a public folder from which to serve it later 
# and an index.js for our server logic
$ mkdir client && mkdir public
$ touch index.js

# Install the relevant server dependencies
$ npm i express

# Add node_modules and public folders to a .gitignore file
$ echo "node_modules" >> .gitignore
$ echo "public" >> .gitignore

그런 다음 인덱스 파일에 최소한 다음을 추가합니다(예: sudo nano index.js 또는 전용 IDE 사용).

const express = require('express');
const app = express();
const host = http://localhost
const port = 3000

// We'll use the public directory to serve the Vue App
app.use(express.static('public'));

app.listen(port, () => {
 console.log(`App listening on ${host}:${port}`);
});

그런 다음 다음 첫 번째 변경 사항을 준비하고 커밋합니다.

$ git stage --all
$ git commit -m 'Initial commit backend'

2. Vue 부분

# If you do not have it yet, install the Vue cli
$ npm i -g @vue/cli

# Move into the client folder and init a new, default (-d) Vue project inside
$ cd client && vue create . -d

# Create a vue.config file and fill it with the content below
$ touch vue.config.js

다음 구성은 Vue 앱이 Node 앱의 공용 폴더 내에 빌드되도록 합니다. 반드시 필요한 것은 아니지만 사용 사례에 유용할 것입니다. 노드 앱을 배포할 때마다 클라이언트 앱도 배포해야 합니다.

// Inside the vue.config.js file
const path = require("path");

module.exports = {
 outputDir: path.resolve(__dirname, "../public")
}

전희를 위해 실제 구성을 설정해 보겠습니다.

Before reading ahead, move to Github and create a new repository. You can link your local environment with the remote one according to the tooltips on Github, so I'll skip that step. Once that's done, push the changes and read ahead.

3. npm 스크립트 구성

이제 흥미로운 부분입니다. 매우 기본적인 설정이지만 수행할 작업에 대한 아이디어를 제공해야 합니다. 프로덕션 환경에서는 노드 프로세스 관리자인 pm2를 사용하는 것도 편리합니다. 다음을 설치해 보겠습니다.

$ npm i -g pm2

이제 앱의 /client 디렉토리에 있다고 가정하고 package.json 파일에 다음 스크립트가 있는지 확인하십시오.

{
 // ... name, version etc.
 "scripts": {
   "build-app": "npm install && npm run build",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 }
 // ... dependencies, other config
}

그게 다야. 이제 클라이언트 디렉터리에서 벗어나 마지막 단계를 구성해 보겠습니다.

cd ..

root 디렉토리에 있으므로 package.json 파일에서 다음 스크립트를 사용할 수 있는지 확인하십시오. 다음이 진행됩니다.

변경 사항이 있는 경우 원격 git repos에서 풀다운됩니다.

노드가 공용 폴더에 클라이언트 앱을 빌드합니다.

프로젝트 종속성도 설치합니다.

그런 다음 pm2로 앱을 시작하고 앱 실행을 볼 수 있는 기본 모니터를 엽니다.

{
 // ... name, version etc.
 "scripts": {
  "build-app": "git pull && npm run build-client && npm install && npm start",
  "build-client": "mkdir -p public && cd client && npm run build-app && cd ..",
  "start": "pm2 start app.js -n Convertible9000 && pm2 monit"
 }
 // ... dependencies, other config
}

Note: If the app is already running with pm2, you'll need to reload it

# Instead of --all, you can specify the app's name
$ pm2 reload --all 

마지막으로 변경 사항을 다시 Github에 푸시합니다.

$ git stage --all
$ git commit -m 'Setup the build configuration' 
$ git push

4. 마무리

그리고 그게 다야. mashine에서 전체 프로젝트를 삭제하고 이를 복제한 다음 build-app 스크립트를 실행했다고 가정하면 앱이 생산적인 방식으로 실행될 것입니다. 소요 시간:

# Pull down the demo repos
$ git clone https://github.com/tq-bit/node-vue-fullstack-automation.git

# Step in and start the build process
$ cd node-vue-fullstack-automation && npm run build-app

나는 집에서 내 라즈베리에서 똑같이 당기려고 노력했습니다. 결과는 다음과 같습니다.



빌드된 앱이 포트 3000에서 실행되고 있습니다.

다음으로 Git hooks 또는 Github webhooks을 사용하여 워크플로를 더욱 자동화할 수도 있습니다. 예를 들어 병합이 완료되면 항상 마스터 브랜치를 풀다운하거나 배포가 실패하면 동료에게 알리도록 할 수 있습니다. 아마도 당신은 이미 마음 속에 무언가를 가지고 있습니까?

This post was originally published at https://blog.q-bit.me/quick-dirty-how-to-deploy-a-fullstack-vue-js-app-with-a-working-node-js-backend/
Thank you for reading. If you enjoyed this article, let's stay in touch on Twitter 🐤