该篇文章主要讲解如何搭建一个vitepress项目，并部署到阿里云服务，通过访问公网ip去浏览。
1、vitepress项目搭建
2、gitee代码管理
3、阿里云服务购买
4、ssh本地连接
5、linux命令
6、nginx配置
7、公网浏览
一、项目搭建
1、项目代码编写
（1）在D盘新建一个目录vitepress，将它拖入vscode编辑器中。打开终端：
（2）初始化项目，创建一个 package.json 文件
PS D:\vitepress> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (vitepress)
version: (1.0.0)
description: 网站部署
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\vitepress\package.json:
{
"name": "vitepress",
"version": "1.0.0",
"description": "网站部署",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
PS D:\vitepress>
（3）安装 vitepress插件
PS D:\vitepress> npm add -D vitepress
added 79 packages, and audited 80 packages in 30s
10 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS D:\vitepress>
安装完毕，vscode会出现node_modules依赖包文件，package-lock.json文件：
（4）使用vitepress安装向导，快速构建一个简易的项目
PS D:\vitepress> npx vitepress init
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./
│
◇ Site title:
│ Vinca的博客
│
◇ Site description:
│ 网站部署
│
◇ Theme:
│ Default Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run npm run docs:dev and start writing.
PS D:\vitepress>
此时目录产生如下文件：
（5）打开package.json，查看启动命令 ： "docs:dev": "vitepress dev"，在终端输入：
PS D:\vitepress> npm run docs:dev
> [email protected] docs:dev
> vitepress dev
vitepress v1.1.4
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
（6）ctrl + 单击 http://localhost:5173/ 就可以在本机浏览了：
2、创建远程代码管理仓库
（1）在gitee创建代码仓库，新建仓库：新建仓库 - Gitee.com
输入仓库名称，选择开源（这样我们在linux clone就方便了）
（2）将本地代码提交到仓库：
回到vscode，新建终端
初始化仓库
PS D:\vitepress> git init
Initialized empty Git repository in D:/vitepress/.git/
PS D:\vitepress>
发现2k+个可提交文件 ，我们需要一些文件做忽略。
在根目录创建.gitignore文件，并输入node_modules保存
这样，在代码提交的时候就不会把依赖文件一并提交到代码仓库了
这里仅介绍vscode视图界面提交代码
点击+号，暂存所有文件
输入本次代码提交的信息
这时候是无法提交的，需要连接远程仓库才能提交
连接远程仓库
将gitee仓库地址复制到文本框中
输入远程仓库名称 origin
现在就可以提交到master分支了
确认提交
提交成功之后，回到gitee代码仓库页面，需要手动刷新一下，就可以看到刚刚提交上来的代码了
至此项目搭建完成！
二、阿里云服务
1、选型
（1）购买99元/年的2核2G，3M / 40G云服务：
直达链接：云服务器低价长效特价精选
更多选型：云小站_专享特惠_云产品推荐-阿里云
选择CentOS 7版本
设置初始密码
购买时长1年，可以选择续购
选好之后，付款！
2、服务器管理控制台
（1）进入到实例，查看公网ip
3、ssh连接服务器
（1）在本机电脑打开命令行，通过ssh远程连接
# root为登录名，可以在重置密码窗口查看
$ ssh root@公网ip
# 输入yes确认操作
Are you sure you want to continue connecting (yes/no/[fingerprint])?yes
（2）解决问题🔥🔥
如果提示 root@公网ip: Permission denied (publickey,gssapi-keyex,gssapi-with-mic)
# 报错信息：
root@公网ip: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
这时候你需要使用VNC方式登录
无法使用Workbench和第三方远程连接工具（例如PuTTY、Xshell、SecureCRT等）连接实例时，您可以通过VNC远程连接方式登录实例，查看云服务器ECS操作界面的实时状态。
a、前提条件
ECS实例已设置登录密码。如果未设置或密码丢失，必须重置实例密码。具体操作，请重置实例登录密码。b、操作步骤
VNC的远程连接会话默认维持300秒左右，如果您超过300秒左右没有任何操作，连接会自动断开，您需要重新连接实例。c、操作流程图如下图所示
如果你已经在阿里云服务后台，并且处于实例菜单项，请点击远程链接
选择vnc连接方式
进去之后，输入用户名root，按下Enter键。
输入登录密码，按下Enter键。（这里的密码不会展示出来的）
登录成功后，打开并编辑SSH配置文件。
# 编辑文件
vim /etc/ssh/sshd_config
按 i 键进入编辑模式。
将 PermitRootLogin 和 PasswordAuthentication 参数值设置为 yes ，如下所示。
PermitRootLogin yes
PasswordAuthentication yes
如图所示：（如果代码里没有PasswordAuthentication yes ， 你可以补充上去）
按Esc键，输入:wq保存并退出。
重启SSHD服务：
# 重启
systemctl restart sshd.service
（3）重新回到你本机的命令行，再次通过ssh root@公网ip 进行连接
# 命令行出现以下提示，代表成功
Welcome to Alibaba Cloud Elastic Compute Service !
三、安装管理工具
1、创建web目录，来存放我们的项目代码
$ cd ..
$ cd home
$ mkdir web
$ cd web
2、安装工具包
（1）安装git
$ yum install git
$ git --version
git version 1.8.3.1
（2）安装nodejs
$ yum install nodejs
$ node -v
v16.20.2
（3）安装npm
$ yum install npm
$ npm -v
8.19.4
（4）拉取代码
# xxxx.git ==> 你的远程仓库地址
$ git clone xxxx.git
（5）安装依赖
进入到项目目录，查看目录内容（有一个package.json）并安装依赖
$ cd vitepress
$ ls
api-examples.md index.md markdown-examples.md package.json package-lock.json
$ npm i
（6）构建打包
查看package.json构建方式
$ ls
api-examples.md index.md markdown-examples.md node_modules package.json package-lock.json
$ cat package.json
{
"name": "vitepress",
"version": "1.0.0",
"description": "站点部署",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"docs:dev": "vitepress dev",
"docs:build": "vitepress build",
"docs:preview": "vitepress preview"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vitepress": "^1.1.4"
}
项目构建
$ npm run docs:build
（7）获取入口文件，后续nginx访问用
获取构建后的文件资源入口路径，即index.html所在目录
ls -a可查看隐藏的文件或目录（构建在.vitepress目录下)
通过pwd命令获取当前路径位置
$ ls -a
. api-examples.md .gitignore markdown-examples.md package.json .vitepress
.. .git index.md node_modules package-lock.json
$ cd .vitepress
$ ls
cache config.mts dist
$ cd dist
$ ls
404.html api-examples.html assets hashmap.json index.html markdown-examples.html
$ pwd
/home/web/vitepress/.vitepress/dist
回到根目录，配置nginx
$ cd /
$ cd etc
$ cd nginx/
3、nginx配置
（1）安装nginx
# 这里安装nginx跟目录没有关系，你也可以跟nodejs\npm\git它们一并安装
$ yum install nginx
（2）编辑nginx配置文件
安装完成，通过vim命令进行编辑
$ cd nginx/
$ ls
conf.d fastcgi_params mime.types scgi_params win-utf
default.d fastcgi_params.default mime.types.default scgi_params.default
fastcgi.conf koi-utf nginx.conf uwsgi_params
fastcgi.conf.default koi-win nginx.conf.default uwsgi_params.default
$ vim nginx.conf
打开编辑器，按 i 进入编辑模式：
# 添加以下代码
location / {
root /home/web/vitepress/.vitepress/dist;
1ndex index.html;
}
按ESC键，输入:wq保存并退出。
（3）重启nginx
# 输入nginx，启动nginx
$ nginx
# 重启
$ nginx -s reload
四、公网浏览
1、开放端口号
（1）回到阿里云服务管理后台>网络与安全>安全组，开放80端口
(开放后图)
（2）浏览器访问 Vinca的博客
至此，在浏览器输入公网ip即可访问
以上就是前端开发&部署项目的全过程。欢迎评论留言
版权归原作者 Vinca@ 所有， 如有侵权，请联系我们删除。