Analysis to Migrate the Vue Server #88
Assignees
Labels
Milestone
Comments
andrewsignori-aot
added
Devops
andrepestana-aot
added a commit
that referenced
this issue
Sep 14, 2023
Using npm `serve` package or vue-cli to host a Vue.js app in a production environment is generally not recommended for several important reasons like limited performance, security concerns, lack of Load Balancing, low customization, inefficient static file serving, bad redundancy and scalability and lack of features for monitoring and logging. ## Choosing a web server According to w3techs and Netcraft websites Nginx is the most used web server at the moment:  Among the benefits of adopting Nginx for the project the items below can be highlighted: - High Performance: Nginx is renowned for its high-performance capabilities. It is designed to handle a large number of concurrent connections efficiently and can serve static content quickly. This makes it well-suited for websites with high traffic and performance demands. - Low Resource Usage: Nginx is known for its efficiency in using system resources. It consumes significantly less memory compared to some other web servers like Apache, which can be especially beneficial when dealing with limited server resources or a large number of simultaneous connections. - Security: Nginx offers several security features, including DDoS protection, rate limiting, SSL/TLS termination, and the ability to restrict access to certain resources or IP addresses. Its modular architecture allows for easy integration with security solutions and Web Application Firewalls. - Community and Support: Nginx has a large and active user community. You can find a wealth of documentation, tutorials, and community-contributed modules to extend its functionality. Commercial support is also available from Nginx, Inc. for those who need it. - Caching: Nginx provides robust caching capabilities, which can significantly improve website performance by serving cached content to users, reducing the load on your backend servers. - Ease of Configuration: Nginx's configuration syntax is straightforward and easy to work with. It allows you to set up complex configurations with relative ease. Additionally, it can reload configurations without downtime, making it suitable for production environments. - Cost-Efficiency: Nginx is open-source and free to use. During the analysis it's been noticed an increasing number of [projects](https://github.com/search?q=org%3Abcgov+caddy&type=code&p=2) using [Caddy Server](https://caddyserver.com/) among the BCGov projects. Although there isn't any direction to use Nginx in BC Gov projects, it's widely used and, as mentioned above, there are several reasons why we should use Nginx in SIMS web app. ## Docker build recommendations: - 2 step build process (using node for build-stage and a new image with nginx + built files). This way the resulting image will not include node, npm etc. - Using "daemon off;" to make nginx to work in a foreground process letting Docker to monitor it and kill the container in case the process dies. ## Configuration The configuration for the webserver is setup on [nginx.conf](https://github.com/bcgov/SIMS/pull/2284/files#diff-1abef20a58ec56ef3062ccadeb861ba575b5d5db7bd8c3666ce6efc4704601ec) and it is set with the suggested conf from vue-cli docs and a few tweaks. A full example with configuration options can be found [here](https://www.nginx.com/resources/wiki/start/topics/examples/full/). To use variables in nginx configuration it's needed to use [`envsubst` and templating](https://github.com/docker-library/docs/tree/master/nginx#using-environment-variables-in-nginx-configuration-new-in-119). ## Notes - Sonar complaint about the image running as root user should be ignored as it is only for Dockerfile.dev and shouldn't affect production env. - While running the Vuejs app on Vue CLI [it sets running mode to "development" as default](https://github.com/vuejs/vue-cli/blob/eaa2b7341f174260f6ebc2345bd8e838f85a2ea3/packages/%40vue/cli-service/lib/Service.js#L123). When running the web app on Nginx in a local machine, setting the mode is necessary. Otherwise the `process` is not set and the `basesUrl` for the app is [set as in "production" mode](https://github.com/bcgov/SIMS/blob/main/sources/packages/web/src/services/http/common/HttpClient.ts#L4). ## Next steps: - Configure the server_name to only accept requests with the appropriate hostname. For that it's needed to set a "catch-all" server configuration and block it: https://serverfault.com/a/946623 E.g.: ``` server { listen ${PORT} default_server; server_name _; # Configuration for the default server block return 404; } server { listen ${PORT}; server_name dev.hostname-example.com hostname-example.com; location / { root /app; index index.html; try_files $uri $uri/ /index.html; } } ``` - Add Headers required by Web App Vulnerability Scan and recheck it through a new Wava scan. ## References - https://w3techs.com/technologies/overview/web_server - https://www.netcraft.com/blog/january-2023-web-server-survey/ - https://stackoverflow.com/questions/25970711/what-is-the-difference-between-nginx-daemon-on-off-option - https://docs.nginx.com/nginx/ - https://cli.vuejs.org/guide/mode-and-env.html#modes - https://cli.vuejs.org/guide/deployment.html#docker-nginx - https://github.com/search?q=org%3Abcgov+nginx.conf&type=code&p=2 - https://www.nginx.com/resources/wiki/start/topics/examples/full/
andrepestana-aot
added a commit
that referenced
this issue
Sep 15, 2023
…s repo (#2304) - Modified docker-build.yml to allow multi stage builds. docker-build.yml was forcing the base images to be the one passed as argument to the oc command. Now, the image used will be the one in the Dockerfiles. - Modified Dockerfiles to use artifacts.developer.gov.bc.ca images.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Currently, the Vue static files are being served using a basic node server that can be checked under the Dockerfile on the Web package.
The idea is to replace it with an NGINX (https://www.nginx.com/) server or similar.
The text was updated successfully, but these errors were encountered: