Webpack Dev Server helps us a lot automatically reloading our navigator erverytime we make a change to our app (thanks to its Hot Module Replacement and the React Hot Loader plugin). App: instead of serving static React application, our Server will redirect all requests on ++code>/++/code> route to our App service which will run Webpack Dev Server.The following diagram shows our development architecture (differences with target architecture are showed in green): Instead of building the entire architecture each time we make a change in our code, we would still use our Webpack development server. On the other hand, we should not forget efficient development tools: running Docker services on our machine should not slow down features development. On one hand, it ensures we share the same specification on our machines and on the staging/production servers and reduce regression risk when pushing to remote servers. One of our standard at BAM is to be as iso-production as possible when developping. Step 3: Draw your development architecture. It connects our external DB (known host, port and credentials). Api: this service runs Node and its middlewares.It serves our React application on ++code>/++/code>route and redirects queries to our Api on ++code>/api++/code> route. We then need to connect our production server ++code>80++/code> port to this service ++code>80++/code> port. The server is accessible from outside through port ++code>80++/code>. The target container architecture is given here: In order to achieve our goal (which is to make each of our services manageable), we use Docker to containerize them. the database should be accessed with a URL and some credentials.This way we won't have any problem of browsers throwing Cross-origin resource sharing issues. the backend should be accessed with the same root URL than our frontend : the API is our second service and will be discovered behind a proxy of our first server.the React application should be served statically by one server : this is our first service.Now let's think about how our services should run in our production environnement : ![]() ++pre>FROM postgres:9.5++/pre> Step 2: Draw your target architecture.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |