该篇文章主要讲解如何搭建一个vitepress项目，并部署到阿里云服务，通过访问公网ip去浏览。 

1、vitepress项目搭建

2、gitee代码管理

3、阿里云服务购买

4、ssh本地连接

5、linux命令

6、nginx配置

7、公网浏览

目录

一、项目搭建

1、项目代码编写 

（1）在D盘新建一个目录vitepress，将它拖入vscode编辑器中。打开终端：

（2）初始化项目，创建一个 package.json 文件

（3）安装 vitepress插件

（4）使用vitepress安装向导，快速构建一个简易的项目

（5）打开package.json，查看启动命令 ： "docs:dev": "vitepress dev"，在终端输入：

（6）ctrl + 单击 http://localhost:5173/ 就可以在本机浏览了：

2、创建远程代码管理仓库

（1）在gitee创建代码仓库，新建仓库：新建仓库 - Gitee.com

（2）将本地代码提交到仓库：

二、阿里云服务

1、选型 

（1）购买99元/年的2核2G，3M / 40G云服务：

2、服务器管理控制台

（1）进入到实例，查看公网ip

3、ssh连接服务器

（1）在本机电脑打开命令行，通过ssh远程连接

（2）解决问题🔥🔥

（3）重新回到你本机的命令行，再次通过ssh root@公网ip 进行连接

三、安装管理工具

1、创建web目录，来存放我们的项目代码

2、安装工具包

（1）安装git

（2）安装nodejs

（3）安装npm

（4）拉取代码

（5）安装依赖

（6）构建打包

（7）获取入口文件，后续nginx访问用

3、nginx配置

（1）安装nginx

（2）编辑nginx配置文件

（3）重启nginx

四、公网浏览

1、开放端口号

（1）回到阿里云服务管理后台>网络与安全>安全组，开放80端口​编辑

（2）浏览器访问 Vinca的博客

---

一、项目搭建

---

1、项目代码编写 

（1）在D盘新建一个目录vitepress，将它拖入vscode编辑器中。打开终端：

（2）初始化项目，创建一个 package.json 文件

<code>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安装向导，快速构建一个简易的项目

<code>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"，在终端输入：

<code>PS D:\vitepress> npm run docs:dev

> vitepress@1.0.0 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，新建终端

初始化仓库

<code>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远程连接

<code># 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配置文件。

<code># 编辑文件

vim /etc/ssh/sshd_config

按 i 键进入编辑模式。

将  PermitRootLogin  和  PasswordAuthentication  参数值设置为  yes  ，如下所示。

PermitRootLogin yes

PasswordAuthentication yes

如图所示：（如果代码里没有PasswordAuthentication yes ， 你可以补充上去）

按Esc键，输入:wq保存并退出。

重启SSHD服务：

<code># 重启

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

<code># 输入nginx，启动nginx

$ nginx

# 重启

$ nginx -s reload

四、公网浏览

1、开放端口号

（1）回到阿里云服务管理后台>网络与安全>安全组，开放80端口

(开放后图)

（2）浏览器访问 Vinca的博客

至此，在浏览器输入公网ip即可访问

---

以上就是前端开发&部署项目的全过程。欢迎评论留言