Skip to content
Snippets Groups Projects
Commit d40d03fb authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

add caddy local proxy setup

parent d1133a38
No related branches found
No related tags found
2 merge requests!7update master to dev,!4Feature/profile
......@@ -62,4 +62,6 @@ config/*
# Auto generated by React
serviceWorker.*
setupTests.*
\ No newline at end of file
setupTests.*
tools/*
\ No newline at end of file
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Environment variables needed in development found in `.env.example` !
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### `npm test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
## BodySCH Frontend
### `npm run build`
Builds the app
### `npm run lint`
Runs the linter in the console.
### `npm run format`
Format the files in the project with prettier.
### `npm run validate`
Checks the formatting and linter rules for all the files in the source.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### `npm run fix`
#### Local proxy
It runs the formatting and the linter with --fix option
`./tools/local_proxy/Caddyfile/`
Create a local proxy with caddy:
`docker run -d -it --name caddyFrontend -v /path/to/Caddyfile:/etc/caddy/Caddyfile --network host caddy`
When you change the config just `docker stop ...` and `docker start ...`.
If you experience any error check it with `docker logs ...`.
......@@ -2934,20 +2934,11 @@
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dev": true,
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/http-proxy": {
"version": "1.17.4",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
"integrity": "sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q==",
"requires": {
"@types/node": "*"
}
},
"@types/istanbul-lib-coverage": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
......@@ -3037,7 +3028,6 @@
"version": "0.63.6",
"resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.6.tgz",
"integrity": "sha512-qAv/VOyXAk4it9MOsQoyUjUnEJ3kAW1FCRGi0OvfQDKLH1/FFogVFvoB6xAlBNc6lPyBtCg+nvzj/ScYe0PqCQ==",
"dev": true,
"requires": {
"@types/react": "*"
}
......@@ -3080,7 +3070,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.2.tgz",
"integrity": "sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ==",
"dev": true,
"requires": {
"@types/hoist-non-react-statics": "*",
"@types/react": "*",
......@@ -3091,8 +3080,7 @@
"csstype": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
"integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==",
"dev": true
"integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
}
}
},
......@@ -8570,58 +8558,6 @@
"requires-port": "^1.0.0"
}
},
"http-proxy-middleware": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.5.tgz",
"integrity": "sha512-CKzML7u4RdGob8wuKI//H8Ein6wNTEQR7yjVEzPbhBLGdOfkfvgTnp2HLnniKBDP9QW4eG10/724iTWLBeER3g==",
"requires": {
"@types/http-proxy": "^1.17.4",
"http-proxy": "^1.18.1",
"is-glob": "^4.0.1",
"lodash": "^4.17.19",
"micromatch": "^4.0.2"
},
"dependencies": {
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"requires": {
"fill-range": "^7.0.1"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"requires": {
"to-regex-range": "^5.0.1"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
},
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
"requires": {
"braces": "^3.0.1",
"picomatch": "^2.0.5"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"requires": {
"is-number": "^7.0.0"
}
}
}
},
"http-signature": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
......
......@@ -3,6 +3,7 @@ import { userContext } from '../context/UserContext';
const ContextTest = () => {
const { state: user } = useContext(userContext);
// eslint-disable-next-line no-console
console.log(user.name);
return <div>{user ? user.name : 'Not logged in!'}</div>;
};
......
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
'/api',
createProxyMiddleware({
target: 'http://127.0.0.1:8000',
changeOrigin: true,
}),
);
};
# PORT
  • Owner

    Erre egyébként ott van a http-proxy-middleware, ami elég elterjedt és ajánlott a React-os alkalmazások proxyzására. Azt próbáltad esetleg? Nálam az tükéletesen átirányít a megfelelő oldalakra még az auth sch-ra is. Én azt azért preferálom jobban mert ahhoz nem kell docker és hasonló hackelés, egy npm package és működik. :smiley:

  • Author Owner

    Igazából azért raktam be ezt, mert ad lehetőséget több proxy dologra is, mint pl rewrite. :3000/api/* -> :8000/* Lehet a middleware proxy is, de kb ugyanannyi effort mint dockerrel. Konkrétan egyszer kell az a parancs és utánna működik. De ahogy kényelmesebb. Adminsch-nál pl kell ilyen mert ott vannak rewrite-ok és gondoltam ha majd ugyis dolgoztok rajta akkor érdemesebb megismerkedni vele

  • Please register or sign in to reply
:8080
# Reverse proxy
# rewrite
# auth-service
route /api/* {
#uri strip_prefix /api
reverse_proxy * 127.0.0.1:8000
}
reverse_proxy * 127.0.0.1:3000
  • Owner

    Devre szerintem bőven elég a http proxy middleware Aztán az hogy productionbe nginx apache vagy mivel van kiproxy-zva az már inkább üzemeltetős vagy DevOps feladat. Egyébként jó cucc ez is, csak kicsit overkillnek érzem devben egy külső proxy szerverrel megoldani ezt.

  • Author Owner

    Rendben, majd vissza rakom. A prod itt szóba se került, csak a local dev a téma. Pl adminsch-ban egy api kérés: xy/api/auth-service/ + adott url. De az auth service /v2/...-ra hallgat, ergo kell egy rewrite közé már local environmenben is és erre a legkényelmesebb ha fut egy pici proxy.

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment