Vue项目的部署(服务器)

时间:2022-09-26 11:31:44

Vue项目的部署(服务器)

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

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

效果图:

图一:

Vue项目的部署(服务器)

图二:Vue项目的部署(服务器)

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

Vue项目的部署(服务器)

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

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

项目打包

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

Vue项目的部署(服务器)

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

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

配置服务器

环境

Linux服务器操作系统:CentOs 8.1.1911

nginx verson : 1.20.1

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

Vue项目的部署(服务器)

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

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

Vue项目的部署(服务器)

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

  1. 安装nginx

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

yum istall -y nginx

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

nginx -v

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

whereis nginx

Vue项目的部署(服务器)

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

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

Vue项目的部署(服务器)

打开文件进行编辑

# 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

Vue项目的部署(服务器)

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

准备好这些,就可以开启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)

参考博客