当前位置：首页 > news >正文

Vue项目的部署(服务器)

news 来源：原创 2024/4/29 22:27:19

Vue项目的部署(服务器)

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

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

效果图：

图一：

Snipaste_2022-09-24_17-50-45

图二： weather

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

Snipaste_2022-09-24_17-53-18

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

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

项目打包

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

Snipaste_2022-09-24_17-55-01

打包后生成dist文件。这就是我们将来部署到服务器的静态文件。
然后我们开始配置服务器。

配置服务器

环境

Linux服务器操作系统：CentOs 8.1.1911

nginx verson : 1.20.1

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

Snipaste_2022-09-24_21-23-48

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

确认您是否已经安装nginx

whereis nginx

Snipaste_2022-09-24_21-14-56

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

安装nginx

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

yum istall -y nginx

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

nginx -v

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

whereis nginx

Snipaste_2022-09-24_21-14-56

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

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

Snipaste_2022-09-24_21-26-20

打开文件进行编辑

# 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。

Snipaste_2022-09-24_21-31-06

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

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

参考博客