前端Nginx服务配置“这是我参与8月更文挑战的第12天，活动详情查看： 8月更文挑战” https://juejin.

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”

未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y

本文示例使用的是阿里云的服务器

通常来说，前端接触服务器的机会比较少，对 nginx 了解的比较少，但是我们应该也要去了解它，以便查看日志，简单的部署前端环境。以下是自己曾经的部署经历

Nginx服务配置

在本地终端找到我们需要上传的文件
使用Linux的scp命令将本地文件上传到Nginx服务器的特定目录下

通常情况下服务器放置前端资源的目录是 /usr/share/nginx/html

Linux scp命令：scp -r /tmp/local_dir username@servername:remote_dir
```
eg: scp -r ./monitor root@servername:/usr/share/nginx/html/
```

当我们的文件上传到服务器后，需要配置Nginx服务

找到Nginx服务的配置文件 =>> cd /etc/nginx
使用 ls 命令可以看到一个名字叫做 nginx.conf 的文件
编辑配置文件添加新的server配置 =>> vim nginx.conf

在配置文件中插入以下配置

配置的端口号根据实际情况自己确认，我的示例使用的 801
# add new nginx web server for monitor
    server
         {
        listen       801 default_server; 
        listen       [::]:801 default_server;
        server_name  _;
        # 配置目录
        root         /usr/share/nginx/html/monitor/;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

       # location redirect
        location / {
                try_files $uri $uri/ /index.html;
        }
        # 404 处理
        error_page 404 /404.html;
            location = /40x.html {
        }
        # 错误处理
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

保存退出 =>> esc :wq

这样我们的Nginxweb服务器就配置完成了，重新启动Nginx服务 =>> service nginx reload
在浏览器查看我们的web网页，在浏览器输入服务器的IP+端口号即可

eg: servername:801

脚本分享

分享一个自己用到的shell脚本(upload.sh)，方便用于将本地文件上传的Nginx服务器

这样就不用每次都要在终端输入啦

`upload.sh`

```
#!/usr/bin/expect
set password *服务器密码*
spawn scp -r ./dist root@192.168.0.242:/usr/local/nginx/html
expect "*password:*" {send "$password\r"}
# expect eof #退出终端
interact # 退出expect交互界面

```

nginx采坑

Chrome 报错：net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

自己在Google中查了好多，好多说权限的原因。

最后自己解决方案是：

在location /配置项新增 proxy_max_temp_file_size 0;

直接上结果代码啦

location / {
  ...
  ...
  # 新增下面这个配置项
  proxy_max_temp_file_size 0;  
}

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️

文章如有错误之处，希望在评论区指正🙏🙏。