Angular build production

In this tutorial, How to use Angular build production on server Linux VPS.

Building for Production

In development, you have run ng serve command for your application. What about for Angular production? If you look at “package.json” file as below

Angular build production

Now, To build script use the Angular CLI ng build with the –prod flag as below

$ ng build --prod

The during run “build –prod” also create a new folder called dist folder. You need to have server Nginx or Apache for all request to this index.html

How to configure Nginx in production to serve an Angular app

server {
listen 80;
listen [::]:80 ipv6only=on;
if ($host = www.devopsroles.com) {
return 301 https://$host$request_uri;
}
if ($host = devopsroles.com) {
return 301 https://$host$request_uri;
}
server_name www.devopsroles.com devopsroles.com;
return 444;
}

server {
server_name www.devopsroles.com devopsroles.com;
root /var/www/devopsroles.com/dist/devopsroles;
index index.html index.htm;
access_log off;
error_log /var/www/devopsroles.com/logs/error.log;

location / {
try_files $uri $uri/ index.html;
}
location ~ ^/(scripts.*js|styles|images) {
gzip_static on;
expires 1y;
add_header Cache-Control public;
add_header ETag "";

break;
}
listen 443 ssl http2 ; # managed by Certbot
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/devopsroles.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/devopsroles.com/privkey.pem; # managed by Certbot
}

Conclusion

Thought the article, You can use “Angular build production” as above . I hope will this your helpful.

About HuuPV

My name is Huu. I love technology and especially Devops Skill such as Docker, vagrant, git so forth. I likes open-sources. so I created DevopsRoles.com site to share the knowledge that I have learned. My Job: IT system administrator. Hobbies: summoners war game, gossip.
View all posts by HuuPV →

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

This site uses Akismet to reduce spam. Learn how your comment data is processed.