Blog of Desain

Appearance

On this page

服务器部署前端项目 ​

安装 Nginx ​

  1. 购买云服务器ECS 首先，我们需要登录阿里云或腾讯云官网，进行云服务器ECS的选购。

在购买过程中，我们需要选择操作系统，建议选择Linux操作系统，如CentOS、Ubantu等。

此外，还需要选择地域、实例规格、配置网络等，根据实际需求进行选择。

  1. 登录服务器 购买成功后，可以通过远程连接工具（如 Xshell）连接到刚刚购买的云服务器ECS。

  2. 安装nginx 在登录到服务器后，首先需要安装 nginx。根据操作系统的不同，安装方法也略有不同。

这里以CentOS为例：

shell
sudo yum install nginx

安装完 nginx 后，可以通过以下命令验证 nginx 是否已经正确安装：

shell
nginx -v

如果能够显示 nginx 的版本信息，则说明已经安装成功。

可以使用下面的的命令启动 nginx 的服务。

shell
service nginx start

此时访问服务器的公网 IP 就可以看到 nginx 的默认页面。

配置 nginx ​

在安装完 nginx 后，还需要进行一些配置。

  1. 修改配置文件

nginx 的配置文件通常位于 /etc/nginx 目录下，文件名为 nginx.conf。可以使用 Xftp 打开该文件进行编辑。根据自己的需求，对配置文件进行相应的修改。

自定义的配置文件放在/etc/nginx/nginx.conf（配置vue项目的地方）

项目文件存放在/usr/share/nginx/任意项目名/ (存放vue项目的地方)

日志文件存放在/var/log/nginx/

还有一些其他的安装文件都在/etc/nginx

以下是常见的配置项：

text
user nginx;：指定NGINX进程的运行用户。在这个例子中，NGINX将以nginx用户的身份运行。

worker_processes auto;：指定NGINX启动的工作进程数。auto表示根据系统的CPU核心数自动确定进程数。

error_log /var/log/nginx/error.log;：指定NGINX错误日志的路径和文件名。

pid /run/nginx.pid;：指定NGINX进程ID文件的路径和文件名。

include /usr/share/nginx/modules/*.conf;：加载动态模块的配置文件。

events { ... }：定义NGINX的事件模块配置。在这个例子中，设置了最大的并发连接数为1024。

http { ... }：定义NGINX的HTTP模块配置。

log_format main ...：定义了日志格式，其中包含了请求的各种信息，如远程地址、请求时间、请求内容等。

access_log /var/log/nginx/access.log main;：指定访问日志的路径和文件名，并使用上面定义的main格式进行记录。

sendfile on;：启用文件传输优化，提高文件传输效率。

tcp_nopush on;：启用TCP nopush模式，减少网络传输延迟。

tcp_nodelay on;：启用TCP nodelay模式，减少网络传输延迟。

keepalive_timeout 65;：设置HTTP keep-alive连接的超时时间。

types_hash_max_size 2048;：设置MIME类型哈希表的最大大小。

include /etc/nginx/mime.types;：加载MIME类型配置文件。

default_type application/octet-stream;：设置默认的MIME类型。

include /etc/nginx/conf.d/*.conf;：从/etc/nginx/conf.d目录中加载模块化的配置文件。

server { ... }：定义一个服务器块，用于处理特定的监听端口和域名。

listen 7890;：监听的端口号。

server_name _;：指定服务器的名称，这里使用下划线表示匹配任意域名。

root /usr/share/nginx/terminal-index;：指定服务器的根目录。

include /etc/nginx/default.d/*.conf;：加载默认服务器块的配置文件。

location / { ... }：处理根路径的请求。

error_page 404 /404.html;：指定404错误页面的路径。

location = /40x.html { ... }：处理特定的错误页面。

error_page 500 502 503 504 /50x.html;：指定500、502、503和504错误页面的路径。

location = /50x.html { ... }：# 处理特定的错误页面。
  1. 配置虚拟主机 虚拟主机是指在一台服务器上运行多个网站，每个网站有独立的域名和内容。在 nginx 中，可以通过配置虚拟主机来实现这一功能。

在 nginx.conf 文件中，可以使用 server 块配置虚拟主机。每个 server 块包含一个域名和相应的配置。

例如，配置一个名为www.example.com的虚拟主机，可以添加以下代码：

text
server {
  listen       端口;
  server_name  访问域名;

  location / {
      root   线上静态路径; //示例 /usr/share/nginx/html 
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;  //解决子页面适配，刷新404问题
  }
}

其中，listen 指定监听的端口，server_name 指定域名，root指定网站的根目录，…代表其他配置项。

然后将项目打包后生成的 dist 目录中的文件放到 root 指定的路径中。

如果配置文件后执行出错，可以使用 nginx -t 检查报错原因。

  1. 重启 nginx 在配置完 nginx 后，为了使配置生效，需要重启nginx。可以使用以下命令重启：
SHELL
sudo service nginx restart
  1. 访问网站

在配置完 nginx 并重启后，还需要去对应服务器实例的防火墙查看是否放行了监听的端口。

之后就可以通过浏览器访问配置的网站，验证配置是否成功。

在浏览器地址栏中输入配置的域名，如果成功访问到网站的首页，则表明配置成功。

  1. 添加 SSL 证书

如果网站需要加入 SSL 证书，可以在 nginx 配置中添加以下代码：

text
listen       443 ssl http2 default_server;
  server_name  _;
  root         /usr/share/nginx/html;

  ssl_certificate "/etc/pki/nginx/server.pem";
  ssl_certificate_key "/etc/pki/nginx/private/server.key";
  ssl_session_cache shared:SSL:1m;
  ssl_session_timeout  10m;
  ssl_ciphers PROFILE=SYSTEM;
  ssl_prefer_server_ciphers on;

然后将域名的证书添加到上方路径的文件夹中，重启 nginx 服务，就可以将网站的协议改为 https 了。