Parcel Proxy 설정

// dev-server.js
const { createServer } = require('http');
const { createProxyServer } = require('http-proxy');
const Path = require('path');
const Bundler = require('parcel-bundler');

const backEnd = {
  protocol: 'http',
  host: 'localhost',
  port: 3000
};

const parcelEnd = {
  protocol: 'http',
  host: 'localhost',
  port: 8080
};

// parcel options, such as publicUrl, watch, sourceMaps... none of which are needed for this proxy server configuration
const options = {};

// point parcel at its "input"
const entryFiles = Path.join(__dirname, 'public', 'index.html');

// init the bundler
const bundler = new Bundler(entryFiles, options);

bundler.serve();

// create a proxy server instance
const proxy = createProxyServer();

// serve
const server = createServer((req, res) => {
  if (req.url.includes('/api/')) {
    proxy.web(req, res, {
      // back-end server, local tomcat or otherwise
      target: backEnd,
      changeOrigin: true,
      autoRewrite: true
    });
  } else {
    // parcel's dev server
    proxy.web(req, res, {
      target: parcelEnd,
      ws: true
    });
  }
});

console.log('dev proxy server operating at: http://localhost:5050/');
server.listen(5050);

// package.json

"scripts": {
    "start": "parcel -p 8080 ./public/index.html --open",
    "dev": "node dev-server.js",
    "prod": "parcel build index.html",
 },

 

 

proxy를 통해 client에서 데이터를 요청하면 서버에서 요청을 받아서 데이터를 쏴주는? 기능을 구현했다.

왜 webpack은 proxy가 잘 연결되는데, parcel은 잘 연결이 되지 않을까? 궁금..

 

시간날때 번역하자!

 

https://edm00se.io/web/proxying-parcel/

Proxying Parcel