#88 - Analysis to Migrate the Vue Server

[andrepestana-aot]

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 using Caddy Server 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 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.
To use variables in nginx configuration it's needed to use envsubst and templating.

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. 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.

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/

[ann-aot]

👍

[ann-aot]

Just for my understanding, what is /50x.html. is there an HTML file?

[andrepestana-aot]

That is the html file for the 50x errors. We don't have one. Should we create a place holder one or remove that configuration for now? Ideas? @dheepak-aot @guru-aot @andrewsignori-aot @sh16011993

[andrewsignori-aot]

I would be ok to have it removed. We can track improvements in a new ticket to be created.

[ann-aot]

Good work @andrepestana-aot 👍 Just some minor comments and a question

[guru-aot]

Nice one 👍

[guru-aot]

Nice work @andrepestana-aot , we can have a discussion on the nginx configuration with the team and can close it.

[dheepak-aot]

👍

[andrewsignori-aot]

Great work! Please take a look at the comments.
The below BC Gov app has an nginx config com a section named "Headers required by Web App Vulnerability Scan". Maybe that is something else that we will need to look into in a separate ticket. After this effort, we can request a new Wava Scan to get an updated report.
https://github.com/bcgov/moh-hnweb/blob/main/frontend/.nginx/nginx.conf

[andrewsignori-aot]

Minor but can we make the layer name production-stage aligned with the other Dockerfile. Mentioning production here and in the line 24 comment can be misleading.

[andrewsignori-aot]

Thanks for making the changes and for the research. I left just one minor comment as a suggestion, hence approving it. Looks good 👍

[ann-aot]

LGTM 👍 Good work with the analysis

[guru-aot]

LGTM, nice work

[sh16011993]

Thank You for the analysis and migration to nginx.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[github-actions]

Backend Unit Tests Coverage Report

Totals
Statements:	17.54% ( 2181 / 12437 )
Methods:	8.02% ( 126 / 1572 )
Lines:	20.32% ( 1917 / 9432 )
Branches:	9.63% ( 138 / 1433 )

[github-actions]

E2E Workflow Workers Coverage Report

Totals
Statements:	46.73% ( 300 / 642 )
Methods:	40% ( 32 / 80 )
Lines:	51.02% ( 251 / 492 )
Branches:	24.29% ( 17 / 70 )

[github-actions]

E2E Queue Consumers Coverage Report

Totals
Statements:	67.54% ( 437 / 647 )
Methods:	58.02% ( 47 / 81 )
Lines:	69.93% ( 386 / 552 )
Branches:	28.57% ( 4 / 14 )

[andrewsignori-aot]

Is it not the same as having the PORT hardcode directly at the file?
Just wondering what is the benefit between having it hardcoded in the file vs the like 4.
Either way it is just a question for my information, not a blocker.

[andrepestana-aot]

In Dockerfile.dev it uses 8080 but for Dockerfile it uses 3030. We can change that later. It's just that in some places it has 3030 as the default port. We can change our local to 3030 too.

[andrewsignori-aot]

Looks good to me 👍

[github-actions]

E2E SIMS API Coverage Report

Totals
Statements:	54.48% ( 3995 / 7333 )
Methods:	51.31% ( 488 / 951 )
Lines:	59.3% ( 3245 / 5472 )
Branches:	28.79% ( 262 / 910 )

[ann-aot]

👍

[dheepak-aot]

Thanks for all the work put in to move to NGINX.