Vue项目的部署(服务器)

前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了，访问链接 点这里。

服务器是朋友的，倒时候打不开会很正常，说不定又使用服务器玩大数据项目去了😆

效果图：

图一：

图二：

当然，温度也都是实时跟新的, 而且根据气温高低，排出气温 top5.

这里项目就不详细说了，接下来和大家说一下项目部署的事情。

目前由于 money💰问题，只能展示 20 个城市的信息

项目打包

1. 首先使用 npm run bulid 对项目进行打包。

2. 打包后生成 dist 文件。这就是我们将来部署到服务器的静态文件。

3. 然后我们开始配置服务器。

配置服务器

环境

Linux 服务器操作系统：CentOs 8.1.1911

nginx verson : 1.20.1

远程连接服务器的工具：博主使用的工具是 MobaXtrem_Personal_22.0，用了半年多了，命令行 + 传文件都是在一起的。

本次的项目，我们需要借助 nginx 的处理访问高并发性能力，来搭建项目。这里博主用的服务器是 centosOS7, 我们先需要安装 nginx。

1. 确认您是否已经安装 nginx

whereis nginx 

我之前已经安装过 nginx 了，所以就不再卸载重装了。这里教大家如何安装 nginx。

2. 安装 nginx

我们可以使用 yum install -y nginx 来安装 nginx。

yum istall -y nginx 

安装完成后，可以查看版本号。

nginx -v 

安装完成后，查看 nginx 的配置文件在哪里

whereis nginx 

可以看到，我们的配置文件是在/etc/nginx/nginx.conf

这里，我们打开配置文件进行编辑，主要是默认端口号，以及配置一下你的项目所在的地址。

打开文件进行编辑

# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; +pid /usr/local/nginx/logs/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events {worker_connections 1024;} http {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; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 4096; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server {listen 80; listen [::]:80; server_name _; + root /home/weather/dist; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; error_page 404 /404.html; location = /404.html {} error_page 500 502 503 504 /50x.html; location = /50x.html {} } } 

这里，我们要注意 root 的路径，这里就需要你放置项目文件的地方，我这里是/home/weather/dist。

把打包好的项目丢到这里，如果是压缩的，要先解压！

准备好这些，就可以开启 nginx 了。

nginx 

重启 nginx 服务器

nginx -s reopens 

重新载入配置文件

nginx -s reload 

停止 nginx 服务器

nginx -s stop 

注意，你可能会碰到一些问题，比如启动失败，报Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)

这种情况，我们需要干掉占用 80 端口的应用.

sudo fuser -k 80/tcp fuser -k 80/tcp 

参考博客

另外一种错误nginx 启动报错：nginx: [error] open()“/var/run/nginx/nginx.pid“failed (2: No such file or directory)

参考博客

原文链接：https://www.cnblogs.com/liyublogs/p/16726780.html