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 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui