The pitfalls of deploying Angular projects in Nginx

The pitfalls of deploying Angular projects in Nginx

Searching online for methods to deploy Angular projects to Nginx after compilation, most articles describe the need to specify a jump to the home page in location of the Nginx configuration file to avoid the problem of 404 caused by refresh. The complete server code is:

server {
 listen 80;
 server_name 192.168.190.131;

 #sendfile on;
 #charset koi8-r;
 access_log /var/log/nginx/host.access.log main;

 location / {
  root /chanchaw/app/angular;
  index index.html index.html;
  try_files $uri $uri/ /index.html;
 }

 error_page 404 /index.html;

 location = /index.html {
  root /chanchaw/app/angular;
 }
}

server_name above is followed by the IP address of CentOS7.3 . Pay special attention to the following location : try_files $uri $uri/ /index.html . This is to prevent 404 errors caused by refreshing the browser. Now here comes the point. After deploying to Nginx , the browser test has the following problems:

index.html and js files are in the same directory, so why can't they be found? chrome is like this, firefox is like this too, okay, let's try IE.

solve

It turns out that chrome and firefox will automatically convert http to https to make requests, and CentOS I used for the experiment was installed in a virtual machine, and I never thought about deploying ssl . Since ie does not convert protocols, there is no problem testing on ie .

You may also be interested in:
  • Record the entire process of Angular project from creation, packaging to nginx deployment

<<:  Detailed explanation of NodeJS modularity

>>:  Example of how to enable Slow query in MySQL

Recommend

Ubuntu 16.04 installation tutorial under VMware 12

This article shares with you the installation tut...

MySQL learning database backup detailed explanation

Table of contents 1.DB,DBMS,SQL 2. Characteristic...

Practice of Vue global custom instruction Modal drag

Table of contents background Implementation ideas...

7 Ways to Write a Vue v-for Loop

Table of contents 1. Always use key in v-for loop...

Introduction to the use of MySQL official performance testing tool mysqlslap

Table of contents Introduction Instructions Actua...

Detailed explanation of MySQL partition table

Preface: Partitioning is a table design pattern. ...

Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized...

Vue+spring boot realizes the verification code function

This article example shares the specific code of ...

Introduction to the use and advantages and disadvantages of MySQL triggers

Table of contents Preface 1. Trigger Overview 2. ...

Installation and use of Ubuntu 18.04 Server version (picture and text)

1 System Installation Steps OS Version:1804 Image...

Detailed explanation of Vue's live broadcast function

Recently, the company happened to be doing live b...

A brief discussion on how to use slots in Vue

How to define and use: Use the slot tag definitio...

Nginx one domain name to access multiple projects method example

Background Recently, I encountered such a problem...