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 -v和npm -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

  • 可见部署成功
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端