nginx 部署前端项目,Linux基本操作,FTP上传,npm升级nodejs

登录服务器

js 复制代码
$ ssh root@你的ip
# 然后输入密码,完成登录

Linux 基本知识

文件操作

指令 备注
vim <文件名> 编辑某个文件
cat <文件名> 查看某个文件的内容
touch <文件名> 新建某个文件

vim编辑器

通过 vim <文件名> 即可进入对该文件的编辑模式,按下 i 切换到编辑状态。

想要结束输入,可以按 esc 键,想要退出编辑模式,可以敲下 :wq 或者按快捷键:shift+zz

在命令模式下按下 i 就进入了输入模式。

在输入模式中,可以使用以下按键取消与显示行号:

功能 命令
行号显示 :set nu
行号显示取消 :set nonu

杀死进程

查看进程:

$ ps -ef

查看到进程中的 PID ,然后执行:

正常杀死

$ kill -1 2235

强制杀死

$ kill -9 2235

SSH 上传/下载文件(本机的终端运行)

SSH 可以通过 scp 命令来上传文件,是 Linux 系统下基于 SSH 登陆进行安全的远程文件拷贝命令,scp 是 secure copy 的简写,可以使用它上传本地文件夹到远程服务器,也可以从远程服务器上下载文件夹到本地:

  • 打开你的某个项目 如用git 打开你所打包的前端目录 dist

  • 上传文件夹到远程服务器

scp -P port -r /local/dir username@servername:/remote/dir

scp -r ./dist root@你的ip:/home

从远程服务器下载文件夹

scp -P port -r username@servername:/remote/dir/ /local/dir

scp -r root@你的ip:/home ./

-r 参数表示递归复制,即复制该目录下面的文件和目录,如果要上传单个文件,只要把 -r 删除。大写的 P 表示的是端口,如果还是默认的 SSH 端口 22 没有更改,则不需要 -P

注意:这两行代码要在你本机的终端运行,而不是在阿里云的终端。

FTP上传

你也可以使用ftp工具上传,如 File Zilla。点击即可下载。

nginx

快速安装Nginx

首先,确保自己连接上了服务器 ssh 用户名@公网ip,然后运行:

yum list | grep nginx

接着运行:

yum install nginx

安装好后 nginx -v 可以查看 Nginx 版本信息。并且使用 rpm -ql nginx 可以查看 Nginx 被安装到了什么地方。

这里有两个文件夹要留意: /etc/nginx/conf.d/ 文件夹,是我们进行子配置的配置项存放处,/etc/nginx/nginx.conf 主配置文件会默认把这个文件夹中所有子配置项都引入; /usr/share/nginx/html/ 文件夹,通常静态文件都放在这个文件夹,也可以根据你自己的习惯放其他地方;

然后设置 Nginx 的开机启动:

systemctl enable nginx

启动 Nginx :

systemctl start nginx

浏览器访问公网IP

在浏览器输入你的公网IP,无需端口号(默认80),如果看到 Welcome to nginx 之类的界面,就是Nginx安装并启动成功了。

配置node环境

  • 安装node

yum install nodejs -y

  • nodejs升级到最新LTS版本

npm升级nodejs

安装 n 模块 npm install -g n

安装最新的稳定版本 n stable

这时候我们可以通过node -vnpm -v来查看版本

Nginx重启

  • 需进入到 /etc/nginx/sbin 目录下面执行下面的代码

nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启

Nginx配置文件

我们一般对Nginx的修改主要就是修改 /etc/nginx/nginx.conf 这个配置文件,nginx.conf 结构图:

通常我会找到server,然后做如下设置:

server {

listen 80;

server_name localhost;

location / {

root /usr/local/html;

index index.html index.htm;

}

}

这里要确保你在 /usr/local 这个目录下创建了一个 html 文件夹,并且有index.html文件。

root /usr/local/html(项目的目录);
index index.html index.htm(项目目录下面的index.html文件);

我们之前把打包好的前端项目上传到服务器 /home/dist 目录中了 只需这样修改就行了

root /home/dist;
index index.html index.htm;

重启nginx服务器

  • 需进入到 /etc/nginx/sbin 目录下面执行下面的代码

nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启

再次访问ip

  • 可见部署成功
相关推荐
万少1 分钟前
HarmonyOS Next 弹窗系列教程(3)
前端·harmonyos·客户端
七灵微1 小时前
【后端】单点登录
服务器·前端
持久的棒棒君5 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆7 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz8 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou08 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干8 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大8 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu8 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端9 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js