Express, VueJS 및 PostgreSQL 시작

우리는 모두 MEAN(MongoDB Express Angular NodeJS) 스택을 들은 적이 있거나, 최근에 MERN(MongoDB Express React and NodeJS) 스택을 들은 적이 있다.
초보자 도구 꾸러미가 이 창고를 이용하는 경우가 많은데, 비슷한 것을 찾고 있지만 몇 가지 변화가 있다.저는 PostgressQL로 MongoDB를 교체하고 싶습니다. 모든 것을 할 수 있는 주력이기 때문입니다. 그리고 VueJS로 React를 교체하는 것은 Vue가 더욱 접근하기 쉽고 초보자에게 더욱 우호적이라는 것을 발견했기 때문입니다.
나는 어떤 유사한 것도 발견하지 못해서 결국 스스로 하나를 만들었다.PEVN(PostgreSQL Express VueJS NodeJS) 스택이라고 부르겠습니다. 알고 있습니다...0 대표 아이디어!
나는 몇 시간 동안 모든 것을 내가 원하는 방식으로 운행하도록 했다.나는 누구든지 이렇게 하기를 바라는 번거로움을 피하기 위해 이 과정을 기록했다. 너는 아래를 발견할 것이다.
TL;DR-https://github.com/jesalg/penv-starter
노드 JS
시작하기 전에 NodeJ가 설치되어 있는지 확인하십시오.나는 가장 간단한 방법이 nvm를 통과하는 것을 발견했다.Rails 개발자는 이것이 rvm와 매우 비슷하다는 것을 발견할 수 있다.설치하려면 다음 명령을 실행하여 nvm 및 최신 버전의 NodeJS를 설치하십시오.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ source ~/.bash_profile
$ nvm install node
$ nvm use node

나타내다
Express를 설치하는 가장 간단한 방법은 발전기를 사용하는 것입니다.

$ npm install express-generator -g
$ express pevn-starter
$ cd pevn-starter && npm install

VueJS 회사
이제 우리는 기본적인 응용 프로그램이 생겨서 재미있는 부분에 들어가게 되었다.각 Express 보기는 DOM에서 필요한 데이터를 가져오거나 서버에 AJAX 요청을 보내는 자체 VueJS 응용 프로그램(MVVM 모드)으로 간주합니다.
따라서 이 예에서는 Jade 뷰를 렌더링할 때 색인 Vue 응용 프로그램을 실행하기 위해 연관된 VueJS 응용 프로그램과 스타일을 views/index.jade, client/css/index.css, client/js/index.js 및 /client/js/Index.vue 에 배치하고자 합니다.
따라서 패키지된 자산 파일을 로드하려면 views/index.jade 에서 보기를 알려야 합니다.

extends layout

block content
  #index(data-visitors-json="#{JSON.stringify(visitors)}")
  script(src="#{webpack_asset('index', 'js')}")
  link(rel='stylesheet', href="#{webpack_asset('index', 'css')}")

Dellclient/js/index.js은 Index Vue 애플리케이션을 안내합니다.

import Vue from 'vue'
import Index from './Index.vue'

new Vue({
  el: '#index',
  data: {
    visitors: []
  },
  render (createElement) {
    return createElement(Index)
  },
  beforeMount() {
    this.visitors = JSON.parse(this.$el.dataset.visitorsJson) //Grab this data from the DOM
  }
})

Vue 어플리케이션은 다음과 같습니다.

<template>
    <div>
        <h1>Hello World</h1>
        <p>Welcome to PostgreSQL, Express, VueJS, NodeJS starter</p>
        <p>Here are the last 10 visitors:</p>
        <table>
          <thead>
            <th>ID</th>
            <th>IP</th>
            <th>User Agent</th>
          </thead>

          <tr v-for="(visitor, index) in visitors" :key="index">
              <td>{{ visitor.id }}</td>
              <td>{{ visitor.ip }}</td>
              <td>{{ visitor.user_agent }}</td>
          </tr>
        </table>
    </div>
</template>

<script>
export default {
  data() {
    return {
      visitors: []
    }
  },
  methods: {

  },
  created() {
    this.visitors = this.$parent.visitors; //Grab this data from the parent
  }
}
</script>

당분간 방문객 목록을 표시하는 논리를 걱정하지 마세요.금방 갈게요.
웹 패키지
패키지 인덱스를 만듭니다.js 자산 파일은 우리의 보기에 웹 팩, VueJS 및 관련 의존 항목을 설치해야 합니다.

$ npm install webpack extract-text-webpack-plugin assets-webpack-plugin babel-core babel-loader babel-preset-es2015 css-loader file-loader style-loader url-loader vue-template-compiler --save-dev
$ npm install vue express-webpack-assets webpack-dev-middleware webpack-hot-middleware

다음은 웹 패키지를 만듭니다.구성js를 붙여넣습니다.

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var SaveHashes = require('assets-webpack-plugin');
var isProd = (process.env.NODE_ENV === 'production');

var config = {
  entry: {
    index: [
      path.join(__dirname, 'client/js/index.js'),
      path.join(__dirname, 'client/css/index.css')
    ],
  },
  output: {
    path: path.join(__dirname, 'public/dist/'),
    publicPath: '/dist/',
    filename: '[name].[hash].js'
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue: isProd ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
    }
  },
  module: {
    rules: [{
        test: /\.vue$/,
        exclude: /node_modules/,
        use: [{
          loader: 'vue-loader'
        }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }]
      },
      {
        test: /\.svg/,
        use: {
          loader: 'svg-url-loader',
          options: {}
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        })
      },
    ]
  },
  devtool: 'eval-source-map',
  plugins: [
    new SaveHashes({
      path: path.join(__dirname, 'config')
    }),
    new ExtractTextPlugin({
      publicPath: '/dist/',
      filename: '[name].[hash].css',
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ]
}

if (isProd) {
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config

우리의 웹 패키지 설정은 클라이언트 폴더의 자산을 압축된 JS와 CSS 패키지로 컴파일할 수 있도록 합니다. 캐시를 파괴하는 해시 파일 이름을 포함합니다.
이제 Express가 웹 팩을 사용하고 있다는 것을 알고 시작하는 동안 실행하기를 원해야 합니다.그래서 응용 프로그램에서js에서 다음을 추가합니다.

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var webpackAssets = require('express-webpack-assets')
.
.
.
// webpack setup
if (NODE_ENV === 'production') {
  app.use(express.static(__dirname + '/dist'));
} else {
  const compiler = webpack(config)
  app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: { colors: true }
  }))
  app.use(webpackHotMiddleware(compiler))
}
app.use(webpackAssets('./config/webpack-assets.json', {
  devMode: NODE_ENV !== 'production'
}));
.
.
.

PostgreSQL
마지막으로, 우리는 계속해서 설치sequelize ORM과 관련 의존항을 통해 pg 지원을 추가합니다.

$ npm install sequelize pg pg-hstore --save
$ npm install sequelize-cli --save-dev
$ ./node_modules/.bin/sequelize init

이 명령을 실행하면 올바른 연결 정보 업데이트client/js/Index.vue만 사용하면 설정 코드가 생성됩니다.

{
  "development": {
    "username": "root",
    "password": null,
    "database": "pevn_development",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "pevn_test",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "pevn_production",
    "host": "127.0.0.1",
    "dialect": "postgres"
  }
}

완료되면 첫 번째 모델을 만들고 마이그레이션을 실행합니다.

$ ./node_modules/.bin/sequelize model:generate --name Visitor --attributes ip:string,user_agent:string
$ ./node_modules/.bin/sequelize db:create
$ ./node_modules/.bin/sequelize db:migrate

이 예제에서는 웹 페이지에 액세스할 때마다 사용자의 IP 및 UserAgent 문자열을 기록하고 마지막 10개의 레코드를 표시하는 방문자 테이블을 만듭니다.

var express = require('express');
var models = require('../models');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  models.Visitor.create({
    user_agent: req.get('User-Agent'),
    ip: req.ip,
  }).then(() => {
    models.Visitor.findAll({limit: 10, order: [['createdAt', 'DESC']]}).then((visitors) => {
      res.render('index', { title: 'PEVN Stack!', visitors: visitors });
    })
  });
});

module.exports = router;

결론
이렇게 해서 우리는 한 바퀴 돌고 이 순환을 끝냈다.만약 모든 것이 정상이라면, 현재 포트 4000에서 응용 프로그램을 실행할 수 있어야 합니다.

$ npm start

서버 코드를 변경할 때마다 프로그램을 다시 시작해야 한다는 것을 알 수 있습니다.코드가 변경되면 프로그램이 자동으로 다시 시작할 수 있도록 nodemon을 사용할 수 있습니다.

$ npm install --save-dev nodemon

Dellconfig/config.json에서는 서버 측 논리 변경이 감지될 때 다시 시작하도록 구성할 수 있습니다.

{
  "verbose": true,
  "ignore": ["public/"],
  "events": {
    "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
  },
  "watch": ["routes/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js jade"
}

마지막으로 npmstart 명령을 nodemon.json 로 업데이트할 수 있습니다
우리가 할 수 있는 더 재미있는 일이 있다. 나는 이 빠른 시작을 남겼다.예를 들어, 우리는 Babel을 통해 NodeJS 서버 논리를 실행할 수 있으며, 이렇게 하면 서버에서 ES6 문법을 사용할 수 있다.이러한 향상된 기능에 대한 지역사회의 요청이 있기를 기대합니다!:)
이 글은 최초로 my blog에 발표되었다.만약 당신이 이 게시물을 좋아한다면, 소셜 미디어에 공유하세요!