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/
