Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to launch Angular project". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to launch Angular project"!

How do you get online when we're done with angular?

You may answer:

It is not my bussiness. Right?

Indeed, a pure front-end developer, after completing the development of the project, the rest of the things, you do not have to touch the next online content.

However, as a developer, it is important that we understand the flow of projects from development to launch.

Let's talk about nginx.

React and Vue are similar.

Packaged projects

Angular-cli generated projects are used here. Once you've finished developing your project, you can simply run npm run build. Builder will output according to the package you preset in angular.json.

outputPath: The path to the folder where the package is stored

index: mount template file

main: Main entry file for the project

...

Once you're done, you can view the packaged file via outputPath.

install Nginx

We install Nginx on the machine where we want to deploy the code, which is the server. Operations yum source operations based on centos.

#install nginxyum -y install nginx#view version nginx -v#start nginxsystemctl start nginx.service#access default is port 80 your_ip:80

configure Nginx

Check out the Nginx configuration file nginx.conf.

Use whereis nginx to find where nginx is installed

Add a new configuration file to the/etc/nginx/conf.d folder, such as demo.conf, and configure the interface address of the server side and the entry file path of the front end:

upstream api { server 127.0.0.1:8888; //server keepalive 2000;}server { listen [::]:80 default_server; server_name _; root /usr/share/nginx/demo-frontend/dist/demo-web; //frontend resource location / { add_header Access-Control-Allow-Origin *; } location /api { // api processing proxy_pass http://api; }}# Settings for a TLS enabled server.# server {# listen 443 ssl http2 default_server;# listen [::]:443 ssl http2 default_server;# server_name _;# root /usr/share/nginx/frontend/demo.com/dist;# ssl_certificate "/root/ssh/nginx/1_demo.com_bundle.crt";# ssl_certificate_key "/root/ssh/nginx/2_demo.com.key";# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 10m;# ssl_ciphers HIGH:! aNULL:! MD5;# ssl_prefer_server_ciphers on;# # Load configuration files for the default server block.# include /etc/nginx/default.d/*.conf;## location / {#. add_header Access-Control-Allow-Origin *;# }# to api restful service# location /api {# proxy_pass http://api;# }# error_page 404 /404.html;# location = /404.html {# }# error_page 500 502 503 504 /50x.html;# location = /50x.html {# }# }

TLS is the transport encryption protocol https, and the corresponding certificate needs to be added.

In the above code, we store the static resources of the front end under/usr/share/nginx/frontend/demo.com/dist/, then we will package the dist/** The contents of this directory file upload to the line.

The requested URL/usr/share/nginx/frontend/demo.com/dist/ was not found on this server.

A relatively simple upload scheme is executed directly on the user machine: rsync -avzh server username@62.** 1.**.**:/ index.html and its peers under the project usr/share/nginx/frontend/demo.com/dist/ Synchronizes packaged content to remote server locations. After that restart nginx, i.e. nginx -s reload is done.

At this point, I believe that everyone has a deeper understanding of "how to launch Angular project", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.