IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> Vue项目的部署(服务器) -> 正文阅读

[系统运维]Vue项目的部署(服务器)

Vue项目的部署(服务器)

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

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

效果图:

图一:

Snipaste_2022-09-24_17-50-45

图二:weather

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

Snipaste_2022-09-24_17-53-18

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

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

项目打包

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

Snipaste_2022-09-24_17-55-01

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

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

配置服务器

环境

Linux服务器操作系统:CentOs 8.1.1911

nginx verson : 1.20.1

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

Snipaste_2022-09-24_21-23-48

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

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

Snipaste_2022-09-24_21-14-56

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

  1. 安装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)

参考博客

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2022-09-30 01:24:17  更:2022-09-30 01:26:18 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 6:08:22-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码