Linux使用nginx快速搭建前端頁面

linux使用nginx快速搭建前端頁面

最新版本查看 nginx官網

準備工作

• 服務器常運行
• ssh連接上

1. 查看是否安裝過nginx

//安過會顯示nginx目錄
whereis nginx

//卸載舊的
yum remove nginx

2. 安裝rpm包

//添加源
sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

//安裝nginx
sudo yum install -y nginx

//是否安裝成功, 查看版本
nginx -v

3. 查看和修改配置

//檢測nginx配置是否成功
nginx -t

//會輸出如下表明配置文件ok
> nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
> nginx: configuration file /etc/nginx/nginx.conf test is successful

• 修改配置文件1 /etc/nginx/nginx/conf 如下:

#用戶默認是 nginx 改爲 root
user  root; 
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

	#默認配置
    include /etc/nginx/conf.d/*.conf;
}

• 修改配置文件2 /etc/nginx/conf.d/default.conf

server {
	#默認80,可以自定義
    listen       80; 
    server_name  localhost 127.0.0.1;

	#跨域訪問, 實測沒有任何效果
	add_header Access-Control-Allow-Origin '*' always; 

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

	#配置根路徑 root指向你的前端文件夾路徑, 默認打開index文件
    location / {
				add_header 'Access-Control-Allow-Origin' '*' always;
        root   /root/web/html;
        index  index.html index.htm;
    }
	
	#如果像我一樣, 前端和後臺都在同一臺服務器, 代理直接寫後臺接口IP:端口
	#訪問路徑中含/api/XXX方法的(假如api下的都是後臺接口),會默認代理到上面定義的80端口,避免前端頁面請求跨域問題
    location /api/ {
			add_header 'Access-Control-Allow-Origin' '*' always;
			proxy_pass http://localhost:8081;
    }


    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    
    #nginx錯誤頁面, 一般不改
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

4. 啓動nginx

//啓動nginx ,默認80端口, 直接輸入nginx回車
nginx

//訪問ip,默認頁面路徑(可在配置文件中替換)
/usr/share/nginx/html

5. 關閉防火牆

//關閉防火牆適用於tomcat,nginx等
vim /etc/sysconfig/iptables

#增加80端口(上面自定義的端口)
-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT

//重啓防火牆
service iptables restart 

//查看狀態
service iptables status

6. 常見問題

//查看錯誤日誌,定位問題
cd /var/log/nginx
cat error.log

• 報錯403 forbidden (13: Permission denied)

//由於啓動用戶和nginx工作用戶不一致所致,查看nginx的啓動用戶
ps aux | grep "nginx: worker process" | awk  '{print $1}'
nginx
root

//發現是nginx，而不是用root啓動的, 將 nginx.conf 的 user 改爲和啓動用戶一致
將/etc/nginx/nginx.conf文件中第一行的 user 對應的 nginx 改爲 root ，改完後重啓
nginx -s reload

• 端口占用

//nginx啓動後可查看端口占用情況, 如果衝突自行kill
netstat -ntlp

• 內存佔滿

//刪除linux內存緩存
echo 3 > /proc/sys/vm/drop_caches

• 關於前端跨域訪問接口問題

首先在用工具get/post請求等確定可以正常返回的情況下, 解決瀏覽器跨域請求的兩種辦法

1. 前端頁面使用axios請求代替ajax;

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript">
    function test() {
        axios.post('/api/test', {param:'test'})
            .then(function (response) {
                console.log(response);
                //$('#json').html(JSON.stringify(response))
            })
            .catch(function (error) {
                console.log(error);
            });
    };
		
  // function test() {
  //     $.ajax({
  //       url: '/api/test',
  //       type: "GET",
  //       contentType: 'application/json;charset=utf-8',
  //       data: {param:'test'},
  //       success: function (r) {
  //         console.log(response);
  //         //$('#json').html(JSON.stringify(response))
  //       }
  //   });
  // }

</script>

2. 後臺增加允許跨域訪問;

//在Application中實現WebMvcConfigurer接口, 重寫addCorsMappings方法
@Override
public void addCorsMappings(CorsRegistry registry) {
  //增加允許訪問
  registry.addMapping("/**")
    .allowCredentials(true)
    .allowedHeaders("*")
    .allowedOrigins("*")
    .allowedMethods("*");
}