网页开发之配置阿里云服务器

2025-05-09 本文已影响0人突刺刺

在阿里云购买和配置服务器

一. 创建实例

登录阿里云➡️云服务器ECS➡️实例➡️创建实例：
配置选项：
- 地域：选择离你目标用户最近的地域
- 网络：默认/创建新网络(记住网络名称)
- 实例规格："经济型" (如ecs.e-c1m4.large)
- 镜像：Alibaba Cloud Linux
- 系统盘：40GiB(SSD)
- 数据盘：根据需要选择
- 公网IP：分配公网IPv4地址
- 带宽计费模式：按固定带宽/按使用流量
- 带宽值：1～200Mbps
- 网络：选择"按量付费"或"包年包月"(长期使用)
- 安全组：新建安全组，开放22(SSH), 80(HTTP), 443(HTTPS)端口
- 登录凭证：
- 登录名：
- 密钥对：
- 购买实例数量：
- 购买时长：
❗️❗️❗️记住实例操作系统，不同系统命令行可能会不一样：
```
Alibaba Cloud Linux 3.2104 LTS 64位
```

二. 创建安全组

阿里云控制台➡️云服务器ECS➡️安全组：
- 安全组名称：
- 网络：上面创建实例时的网络
- 安全组类型：
- 访问规则：默认添加了几条入方向规则，直接使用就行，需要自定义端口的，比如添加临时测试的端口8080，再新增一条入方向规则。
  - 授权策略：允许/禁止
  - 优先级：1～100，默认是1，优先级最高
  - 协议类型：TCP/UDP/ICMP/GRE，TCP
  - 端口范围：比如自定义的8080
  - 授权对象：一般选所有IPv4(0.0.0.0/0)

配置实例环境

实例环境：Alibaba Cloud Linux 3.2104 LTS 64位 Alibaba Cloud Linux 是基于 CentOS/RHEL 的发行版
登录阿里云➡️云服务器ECS➡️实例➡️实例详情➡️远程连接

一.安装Nginx

方法1. 通过Nginx官方仓库安装：

先移除之前可能添加的错误仓库:
```
sudo rm -f /etc/yum.repos.d/nginx.repo
```
检查Linux系统版本：
```
cat /etc/alinux-release
```

添加仓库配置：

sudo tee /etc/yum.repos.d/nginx.repo <<-'EOF'
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
EOF

清除旧的Nginx:
```
sudo yum clean all
```
安装Nginx:
```
sudo yum install -y nginx
```

方法2. 使用EPEL仓库安装：
- 安装EPEL仓库:
```
sudo yum install -y epel-release
```
- 安装Nginx:
```
sudo yum install -y nginx
```

方法3. 直接使用Alibaba Cloud Linux默认仓库:
- 直接安装Nginx:
```
sudo yum install -y nginx
```

二.配置Nginx监听指定端口/域名/IP/代理

Nginx主配置文件位置：/etc/nginx/nginx.conf
Nginx站点配置文件位置：/etc/nginx/conf.d/default.conf
通过站点配置文件default.conf的server块配置

键入命令sudo vi /etc/nginx/conf.d/default.conf:

# 默认的端口监听
server {
  #监听端口80
  listen       80;
  # 监听指定域名
  server_name  xxx.cn yyy.cn www.xxx.cn www.yyy.cn;

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

  root   /usr/share/nginx/html;
  index  index.html index.htm;#Nginx欢迎页面
  location / {
      try_files $uri $uri/ =404;
  }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  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;
  #}
}


# 新增监听 8080 端口的配置（可指向不同目录）
server {
  listen 8080;
  server_name  xxx.cn yyy.cn www.xxx.cn www.yyy.cn;
   
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  location / {
    # 只是域名访问网页，显示nginx默认或指定的html页面，而不是代理后端服务，不需要配置proxy_pass
    # proxy_pass http://127.0.0.1:80;  # 将请求代理到本地 80 端口
    # proxy_set_header Host $host;
    # proxy_set_header X-Real-IP $remote_addr;
      try_files $uri $uri/ =404;
  }
}

测试Nginx配置有没有错误
```
sudo nginx -t
```
重启Nginx:
```
sudo systemctl restart nginx
```

查看是否监听了指定端口80|8080:

sudo netstat -tulnp | grep nginx:

[root@实例名称 ~]# sudo netstat -tulnp | grep nginx
tcp        0      0 0.0.0.0:8080            0.0.0.0:*               LISTEN      20792/nginx: master 
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      20792/nginx: master

或者 sudo grep listen /etc/nginx/nginx.conf /etc/nginx/conf.d/*.conf:

[root@实例名称 ~]# sudo grep listen   /etc/nginx/nginx.conf   /etc/nginx/conf.d/*.conf
/etc/nginx/conf.d/default.conf:    listen       80;
/etc/nginx/conf.d/default.conf:    # proxy the PHP scripts to Apache   listening on 127.0.0.1:80
/etc/nginx/conf.d/default.conf:    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
/etc/nginx/conf.d/default.conf:    listen 8080;

测试效果：
- 公网IP+端口号
- 已经备案的域名 (国内基本要备案了，不备案，阿里云会拦截访问)
如果成功就能看到Nginx的欢迎页面

常见的配置：

server块的root放在location里面和外面的区别：
server/root：设置的是网站的根路径，所有location块都继承
server/loaction/root：设置的是location块中的html的根目录，相当于局部设置

server {
    listen       80;
    server_name  www.xxx.cn;
    root /usr/share/nginx/my_web/src;
    index html/index.html;
    location / {
        try_files $uri $uri/ =404;
    }
}

server {
    listen       80;
    server_name  www.xxx.cn;
    location / {
        root /usr/share/nginx/my_web/src;
        index html/index.html;
        try_files $uri $uri/ =404;
    }
}

Nginx配置IP白名单：

 server {
     listen       80;
     server_name  www.xxx.cn;
     # 允许你的 IP（替换为你的公网 IP）
     allow 123.123.123.123;  # 你的 IP
     deny all;  # 拒绝其他所有 IP
     root /usr/share/nginx/my_web/src;
     index html/index.html;
     location / {
          try_files $uri $uri/ =404;
     }
}

Nginx配置域名白名单：

server {
    listen 80;
    server_name dev.xxx.cn;  # 仅限测试域名
    root /usr/share/nginx/my_web/src;
    index index.html;
}

Nginx拦截指定域名：

server {
    listen 80;
    server_name xxx1.cn www.xxx2.cn;
    return 403;  # 直接返回 403 禁止访问
}

Nginx拦截所有未匹配的域名：

server {
    listen 80 default_server;
    return 404;
}

HTTP基础认证(密码保护): 访问网站时会弹出登录框，只有输入正确的账号密码才能访问。

生成密码文件：

sudo sh -c "echo -n 'username:' >> /etc/nginx/.htpasswd"
sudo sh -c "openssl passwd -apr1 >> /etc/nginx/.htpasswd"

修改Nginx配置：

server {
    listen       80;
    server_name  www.xxx.cn;
    root /usr/share/nginx/my_web/src;
    index html/index.html;
    location / {
         auth_basic "Restricted Access";
         auth_basic_user_file /etc/nginx/.htpasswd;
         try_files $uri $uri/ =404;
     }
}

常见的命令：

更新系统包：
```
sudo yum update -y
```

添加Nginx官方仓库:

sudo tee /etc/yum.repos.d/nginx.repo <<-'EOF'
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
EOF

安装Nginx:
```
sudo yum install -y nginx
```
启动Nginx:
```
sudo systemctl start nginx
```
设置Nginx开机自启：
```
sudo systemctl enable nginx
```
重新加载Nginx:
```
sudo systemctl reload nginx
```
重启Nginx:
```
sudo systemctl restart nginx
```
测试配置语法(比如:编辑/etc/nginx/conf.d/default.conf后，测试有没有语法错误)：
```
sudo nginx -t
```

卸载Nginx:

sudo systemctl stop nginx
sudo yum remove nginx
sudo rm -rf /etc/nginx

检查Nginx服务的状态：

sudo systemctl status nginx # 显示 active (running)

检查防火墙状态：
```
sudo firewall-cmd --state
```

如果防火墙有运行，添加指定端口：

sudo firewall-cmd --permanent --add-port=指定端口比如8080/tcp
sudo firewall-cmd --reload

检查公网IP
```
curl ifconfig.me
```
测试服务器本地是否可以访问(换成域名就是测试域名)：
```
curl http://localhost 
```

查看Nginx最新错误日志:

sudo tail -n 100 /var/log/nginx/error.log

实时滚动查看Nginx错误日志:
```
sudo tail -f /var/log/nginx/error.log
```

查看Nginx最新被访问日志:

sudo tail -n 100 /var/log/nginx/access.log

实时滚动查看Nginx被访问日志:
```
sudo tail -f /var/log/nginx/access.log
```
查看站点配置文件/etc/nginx/conf.d/default.conf：
```
sudo vi /etc/nginx/conf.d/default.conf
```

常见错误

问题1. `$releasever`版本匹配不上：

报错：

Errors during downloading metadata for repository 'nginx-stable':
- Status code: 404 for   http://nginx.org/packages/centos/3/x86_64/repodata/repomd.xml (IP: 3.125.197.172)
Error: Failed to download metadata for repo 'nginx-stable': Cannot download repomd.xml: Cannot download repodata/repomd.xml: All mirrors were tried

原因：这个错误是因为Alibaba Cloud Linux 3 的 $releasever 变量被识别为3，而Nginx官方仓库中没有为CentOS 3准备的包（因为 CentOS 3 太旧了）。实际上Alibaba Cloud Linux 3对应的是CentOS 8/RHEL 8的兼容版本

解决： http://nginx.org/packages/centos/$releasever/$basearch/改成http://nginx.org/packages/centos/8/$basearch/

sudo tee /etc/yum.repos.d/nginx.repo <<-'EOF'
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/8/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
EOF

问题2. 浏览器缓存不更新：

现象：
文件更新到服务器了，也重启了Nginx，浏览网页效果没变，打开控制台，发现更新的css，js等静态资源，仍然显示的是未更新之前的。
原因：
浏览器会缓存 CSS、JS 等静态资源，加快加载速度。如果你部署了新版本，但文件名不变，浏览器可能直接使用了旧的缓存。
解决：
- 强制刷新页面：按 Ctrl + Shift + R（Windows）或Cmd + Shift + R（Mac）
- 清除浏览器缓存：进入浏览器设置 → 隐私 → 清除缓存
- 改文件名或加版本号，例如：
  每次部署时更改 v 值，可以强制浏览器重新拉取。
```
<link rel="stylesheet" href="/css/style.css?v=20240520">
```
- 如果服务器(Nginx）配置了强缓存规则，会让浏览器长时间缓存旧资源:
  - 查看站点配置文件default.conf的server块配置：
```
sudo vi /etc/nginx/conf.d/default.conf
```
  - 找到强缓存规则：
```
location ~* \.(css|js|jpg|jpeg|png|gif|ico)$ {
      expires 30d;
      add_header Cache-Control "public";
}
```
  - 改为缓存更新了，再改过来，不然网页的刷新效果会非常不好：
```
location ~* \.(css|js|jpg|jpeg|png|gif|ico)$ {
      expires -1;
      add_header Cache-Control "no-cache";
}
```
  - 再重启：
```
sudo nginx -t
sudo systemctl restart nginx
```

把项目部署到服务

网页开发之部署到阿里云服务器

网页开发之配置阿里云服务器

在阿里云购买和配置服务器

一. 创建实例

二. 创建安全组

配置实例环境

一.安装Nginx

二.配置Nginx监听指定端口/域名/IP/代理

常见的配置：

常见的命令：

常见错误

问题1. `$releasever`版本匹配不上：

问题2. 浏览器缓存不更新：

把项目部署到服务

网页开发之部署到阿里云服务器

猜你喜欢

热点阅读

网页开发之配置阿里云服务器

在阿里云购买和配置服务器

一. 创建实例

二. 创建安全组

配置实例环境

一.安装Nginx

二.配置Nginx监听指定端口/域名/IP/代理

常见的配置：

常见的命令：

常见错误

问题1. $releasever版本匹配不上：

问题2. 浏览器缓存不更新：

把项目部署到服务

网页开发之部署到阿里云服务器

猜你喜欢

热点阅读

问题1. `$releasever`版本匹配不上：